对于一个单页面应用程序(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