使用Angular2时,如何检索当前活动的元件和路径?
例如,我可能有以下路线:
{ path: '', component: HomeComponent },
{ path: 'list', component: ListComponent },
{ path: ':id/', component: CustomComponent }
如果我导航到https://domain.com/test
,是否有方法知道我当前正在查看CustomComponent
并检索id/path(在本例中为“test”)?
我可以使用带有regex的window.location.pathname
来获取路径,但这很混乱,仍然不允许我轻松地获取活动组件。
5条答案
按热度按时间a11xaf1n1#
是的,您可以使用路由器快照检查当前的活动组件-
注意-snapshot._routeConfig.component.name它将为您提供活动组件名称,如果您需要url,也可以通过.url而不是name获取
6ie5vjzr2#
在
ActivatedRouteSnapshot
中,component
属性被定义为以下值之一所以你不能只做
component.name
,除非你已经确定你有了Type<any>
,这是因为字符串上的.name
是不存在的。现在
Type<any>
实际上是一个创建类型(您的组件类型)的函数,定义如下:你可以这样做,它会编译
一个“优雅”的方法是使用一个typescript typeguard(尽管坦率地说,在这种情况下,它并没有给予你带来比我刚才所说的更多的好处)。
然后你可以说
this.name = isComponent(this.route.snapshot.component) ? this.route.snapshot.component : null
。重要提示:
component.name
在AOT构建中仍然有效,但不幸的是,对于--prod
,它最终将是类似r
的随机值。我不得不注入
private element: ElementRef<HTMLElement>
,然后查找标记名。即使在AOT prod构建中,这仍然存在。这样做可能会有性能成本,所以如果你经常使用它,请缓存它。cwxwcias3#
您可以在路由器配置中为根
{enableTracing: true}
启用跟踪,以获得更多关于路由是如何解析和激活的信息zxlwwiss4#
是的,Angular 2入门指南涵盖了所有这些,基本上你需要在你的组件上注入ActivatedRoute,然后你可以通过订阅路由参数来检索你想要的信息。
我真的会推荐你做英雄的Angular 教程之旅,这实际上是他们提供的相当好的学习材料。
在组件构造函数上注入ActivatedRoute:
k3fezbri5#
当然,使用
ActivatedRoute
模块可以访问路由参数或绑定到参数cgange事件此外,您还可以在此处使用以下命令访问当前组件类型