Angular 角度7是否有可能通过其路径获得组件?
我正在使用Angular 角度7是否有可能通过其路径获得组件?,angular,routes,Angular,Routes,我正在使用NavigationEnd事件来检测更改后的当前路线,如下所示: this.router.events.pipe( filter(event => event instanceof NavigationEnd) ).subscribe((event) => { const navObject = event as NavigationEnd; console.log(navObject.url); }); 它可以工作,但
NavigationEnd
事件来检测更改后的当前路线,如下所示:
this.router.events.pipe(
filter(event => event instanceof NavigationEnd)
).subscribe((event) => {
const navObject = event as NavigationEnd;
console.log(navObject.url);
});
它可以工作,但不是很灵活。它提供了url,例如,/user
,由usercomponent
处理。但是如果我在某种逻辑上使用这个url,如果我在路由器设置中更改路由,它就会中断。因此,我还需要更改此名称以及我所有逻辑中的所有其他事件。
因此,如果我能找出哪个组件处理url,那就更好了。即
if (... `instanceof UserComponent`) { ...do somethig user related }
有可能吗?在应用程序组件中,您可能有一个出口路由器,该路由器出口有一个返回活动组件的激活输出。从应用程序组件,您可以调用服务来通知当前组件
<router-outlet (activate)='onActivate($event)'></router-outlet>
我的建议是在路由配置中添加一个数据,并使用该数据确定它是哪个组件 例如:
{
路径:'/user',
组件:UserComponent,
数据:{source:'user'}/试试这个
this.router.events.pipe(
filter(event => event instanceof NavigationEnd)
).subscribe((event) => {
let root = this.router.routerState.snapshot.root;
while (root) {
if (root.children && root.children.length) {
root = root.children[0];
} else {
console.log(root.component);
return;
}
}
});
将给出组件名称。这很有效,谢谢!但在这种情况下,我需要将一些数据向前推送到我的组件。如果我没有找到更直接的解决方案,我会记住这一点。我喜欢向路由添加一些数据的想法。至于第二种方法,This.activatedRoute.snapshot.component总是返回null,This.activatedRoute总是返回null.snapshot返回如下对象{path:,url:}你是对的,我检查它总是空的在我这边我的坏没有检查,我不知道为什么,请使用第一种方法,如果它满足你的需要:)我已经用你的建议和数据解决了它。我认为这种方法看起来足够优雅,可以被接受:)看起来不太漂亮,但一个完全有效的解决方案!谢谢!
this.router.events.pipe(
filter(event => event instanceof NavigationEnd)
).subscribe((event) => {
let root = this.router.routerState.snapshot.root;
while (root) {
if (root.children && root.children.length) {
root = root.children[0];
} else {
console.log(root.component);
return;
}
}
});