Angular 路由器可以公开 parent – 当前 – 下一个路由吗？

Question

我有一个最初重定向到

的模块

 redirectTo: "/profile/bbb"

其中 profile 有两个 children :

{
    path: '',
    component: ProfileComponent,

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

现在 - 在配置文件的构造函数中，我想知道当前路线是什么（profile）以及它将要执行的下一条路线是什么（bbb）。

这是代码：

profile.component.ts

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

但它告诉我：

我想我只是查询了路由的结构而不是当前的活动路由

问题

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

ps 我不想通过 snapshot 解决方案来做，因为组件可以重复使用。

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

如果您想了解每个导航的完整 URL。然后你可以通过使用路由器来做到这一点。可能在 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);
        }
    });        
  }

Angular 路由器可以公开 parent – 当前 – 下一个路由吗？

Can Angular router expose parent – current – next routes?

javascript

angular-routing

angular