Angular路由器可以公开父 - 当前 - 下一条路由吗？

Question

我有一个最初重定向到

的模块

 redirectTo: "/profile/bbb"

profile有两个孩子：

{
    path: '',
    component: ProfileComponent,

    children: [{
      path: 'aaa',
      component: AComponent
    }, {
      path: 'bbb',
      component: BComponent
    }]
  }

现在 - 在profile的构造函数中，我想知道当前路由是什么（profile）以及它执行的下一个路由是什么（bbb）。

这是代码：

profile.component.ts

 constructor(private route: ActivatedRoute) {
    route.children[0].url.subscribe(f => console.log(f))
  }

但它告诉我：

我想我只是查询路线的结构而不是当前的有效路线

问题

我怎样才能在路线的每条路径中知道什么是父路线，当前路线以及它将在哪里导航？

ps我不想通过快照解决方案来实现，因为组件可以重复使用。

Online Demno

Answer 1

您可以使用ActivatedRoute执行此操作。

导入它：

import { ActivatedRoute } from '@angular/router';

现在将其注入组件：

constructor( private route: ActivatedRoute) {
    console.log('Parent URL:', route.parent.url['value'][0].path);
    console.log('Child URL:', route.firstChild.url['value'][0].path);
}

如果您想知道每个导航的完整网址。 然后，您可以使用路由器执行此操作。可能在AppComponent中。

import { Router, NavigationStart, NavigationEnd } from '@angular/router';

组件将如下所示：

  constructor(private router: Router) {
    router.events.subscribe((route) => {
        if (route instanceof NavigationStart) {
            console.log("NavigationStart called:", route.url);
        }
        if (route instanceof NavigationEnd) {
            console.log("NavigationEnd called:", route.url);
        }
    });        
  }