Question

像这样更改后，我正在使用NavigationEnd事件来检测当前路线：

this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event) => {
      const navObject = event as NavigationEnd;
      console.log(navObject.url);
    });

它可以工作，但不是很灵活。它给了我网址，例如/user由UserCompoent处理。但是，如果我在某种逻辑上使用此网址，如果我在路由器设置中更改路由，它将中断。因此，在我的所有逻辑中，我还需要更改此名称和所有其他出现的位置。因此，如果我能找出哪个组件处理url，那将是更好的选择。即

 if (... `instanceof UserComponent`) { ...do somethig user related }

有可能吗？

Answer 1

在应用程序组件中，您可能会有出口路由器，该路由器出口具有激活输出，该输出会返回活动组件。您可以从应用程序组件中调用服务以通知当前组件。

<router-outlet (activate)='onActivate($event)'></router-outlet>

组件中的下一个：

onActivate(event) { if (event instanceOf UserComponent) {doAnything()} }

Answer 2

我的建议是在您的路由配置中添加一个数据，并使用该数据来确定它是哪个组件，

示例：

{ path: '/user ', component: UserComponent, data: { source: 'user' } // <--- unique signature for your component }

，然后使用ActivatedRoute获取该数据，

另一个例子是

直接通过ActivatedRoute进行检查

示例： constructor(private activatedRoute: ActivatedRoute) { if (this.activatedRoute.snapshot.component instanceof UserComponent) { // do something } }

参考：https://angular.io/api/router/ActivatedRoute#component

Answer 3

尝试一下

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;
        }
    }
});

将给出组件名称。

Angular 7是否有可能通过其路线获得零部件？

3 个答案: