Angular2 中如何获取当前路由信息

对于一个单页面应用程序(Single-Page Application),路由信息是非常重要的。在 Angular2 中,我们可以使用 Router 类和 ActivatedRoute 类获取当前路由信息。本文将向您介绍如何在 Angular2 中获取当前路由信息。

获取当前路由信息的方法

Router 类

在 Angular2 中,您可以使用 Router 类获取当前路由信息。代码如下:

------ - ------ - ---- ------------------

------------------- ------- ------- --

---------- -
    -- ------
    ----------------------------- -- -
        -------------------- - -----
    ---
-

上述代码中,我们使用了 router.url 属性来订阅路由变化事件。当路由发生变化时,回调函数内部的代码块就会被执行,打印出当前路由信息。

ActivatedRoute 类

除了 Router 类之外,我们还可以使用 ActivatedRoute 类获取当前路由信息。代码如下:

------ - -------------- - ---- ------------------

------------------- ------ --------------- --

---------- -
    -- ------
    ---------------------------- -- -
        -------------------- - -----
    ---
-

上述代码中,我们通过订阅 route.url 属性来获取当前路由信息。与 Router 类相比,该方法需要注入 ActivatedRoute 类来实现。

示例代码

以下是一个完整的示例代码,用于演示如何获取当前路由信息:

------ - ---------- ------ - ---- ----------------
------ - ------- -------------- - ---- ------------------

------------
  --------- -----------
  --------- -
    ------------ ------------ -------
  -
--
------ ----- ------------ ---------- ------ -
    ------------- -------

    ------------
      ------- ------- -------
      ------- ------ --------------
    - --

    ---------- -
      -- -- ------ ---------
      ----------------------------- -- -
        ----------------- - --------------
      ---

      -- -- -------------- ---------
      ---------------------------- -- -
        ----------------- - --------------
      ---
    -
-

在上述代码中,我们使用了 Router 类和 ActivatedRoute 类来获取当前路由信息,并将这些信息输出到模板中。

结论

在本文中,我们介绍了如何在 Angular2 中获取当前路由信息。通过使用 Router 类和 ActivatedRoute 类,我们可以很容易地获取当前路由信息,并对其进行处理。本文的示例代码可以帮助您更好地理解这个过程,并提供了实现此功能的最佳实践。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6728f6e22e7021665e223a5e