如何在 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 防护中访问我的应用程序状态?