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

Posted 2023-02-22

【中文标题】如何在 Angular 中获取当前的路由段（不是完整的 url）

【英文标题】：How to get the current route segment (not the full url) in Angular

【发布时间】：2020-03-16 11:31:21

【问题描述】：

我看到很多关于在 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 的 open issue。

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

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

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

【问题讨论】：

如果您的问题集中在一个特定的项目上，您将获得更好的答案。一旦你得到第一个问题的答案，我建议你将问题的第二部分移到单独的帖子中。

@samlu，Maihan 的回答为我提供了这个问题所需的信息。不幸的是，最初的问题仍然存在 - 你是对的，这应该是一个不同的question。但是 GitHub 链接中的那个问题的答案和解决方案并不能解决我的问题。 :(

【参考方案1】：

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

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

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

【讨论】：

我以前没有注意到这一点，但路由器事件的最后一段确实符合我的要求。现在，要弄清楚如何在路由器事件流中的正确位置运行我的逻辑......

这可以获取当前段。 const pathSegments = event.url.split('/'); const currentSegment = pathSegments[pathSegments.length - 1];。我可以将它用于我的过滤器。但原来的问题依然存在。我认为是时候提出另一个问题或进行一些额外的研究了。

【参考方案2】：

UrlSegment 可用于此目的。文档中的示例：

@Component(templateUrl:'template.html')
class MyComponent 
  constructor(router: Router) 
    const tree: UrlTree = router.parseUrl('/team;id=33');
    const g: UrlSegmentGroup = tree.root.children[PRIMARY_OUTLET];
    const s: UrlSegment[] = g.segments;
    s[0].path; // returns 'team'
    s[0].parameters; // returns id: 33
  

https://angular.io/api/router/UrlSegment

【讨论】：

这给了我一个包含完整 URL 中所有段的数组。如何确定路由器为哪个段实例化了我的组件？