时间戳

首页 > 解决方案 > 如何在 Angular 中获取当前的路由段（不是完整的 url）

angular - 如何在 Angular 中获取当前的路由段（不是完整的 url）

问题描述

我已经看到很多关于在 Angular 中获取当前路线的问题。据我所知，我查看过的每一个问题和相关答案都会返回完整的当前 URL。

constructor(router: Router){}

myMethod(){
    this.router.url // returns the full URL, regardless of where in the routing tree
                    // the component is being instantiated.
}

我想找到路由器路由到我的组件的特定网段。组件可以在路由中多次实例化。我当前的代码正在获取完整的URL，但我想知道为其实例化组件的特定段。

更多信息：

该组件是一个自定义标签条。它提供了一个未命名<router-outlet>的选项，用于在用户单击选项卡时呈现单个选项卡内容。使用标签条的组件是延迟加载的。但是，其中一个选项卡的内容也使用相同的 Tab Strip 组件（该组件也是延迟加载的）。这就是事情崩溃的地方。在导航到其中一个嵌套选项卡时刷新浏览器时，出现错误：“无法激活已激活的插座”。

调查该错误消息，它似乎是 Angular 的一个未解决问题。

在相关问题中提出的解决方案删除了​​错误，同时也删除了顶层 Tab Strip 的内容。我在想，如果我能更好地过滤提议的解决方案的RouterOutlet.deactivate()调用，我可能会删除错误，同时仍然在所有嵌套级别显示选项卡条的内容。

改进的过滤要求 Tab Strip 组件知道路由器正在为其实例化的当前段。

虽然，这个问题是关于从路由器获取当前段；修复导致我来到这里的错误也会有所帮助。

标签： angulartypescriptangular-router

解决方案

使用NavigationEnd. 每次导航发生时，Router.events都会触发并检查是否成功获取当前路线。

constructor(private router: Router) {
  router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
      console.log(event.url);
    }
  });
}

event为您提供url当前路线的属性。

推荐阅读