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

Posted

技术标签:

【中文标题】如何在 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 中所有段的数组。如何确定路由器为哪个段实例化了我的组件?

以上是关于如何在 Angular 中获取当前的路由段(不是完整的 url)的主要内容,如果未能解决你的问题,请参考以下文章

如何从给定的外部 url 获取数据会话 ID 和所有内容,而不是来自我的应用程序(路由)在 Angular 6

NGRX - 如何在 Angular 防护中访问我的应用程序状态?

Express Router:如何获取参数? (不是 URL 段)[重复]

如何从Angular2中的父组件获取子路由的:id参数

如何在 Kubernetes 中路由 Angular?

如何在angular6中使用打字稿获取当前年份