在根组件内显示路由标题

Question

我有一个根组件，并希望在其中的特殊部分中显示路由标题。
我可以检测每个组件中哪个路由处于活动状态。
但是，我不知道如何在根中执行此操作零件。

这段代码在 ChildComponent1 中显示标题很好：

route:ActivatedRoute
ngOnInit() {

        this.route.data.subscribe(
            data => console.log(data)
        )

    }

如何检测当前路由的标题并将其显示在根组件中？

export const routes: Routes = [

  {path: '', component: Component1, canActivate: [NonAuthGuard]},

  {
    path: 'root', component: rootcomponent, canActivate: [AuthGuard], children: [
    {
      path: 'Child1',
      component: ChildComponent1,
      data: {
        title: 'Child1'
      },
      canActivate: [AuthGuard],
      canDeactivate: [CanDeactivateGuard]
    },
     {
      path: 'Child2',
      component: ChildComponent2,
      data: {
        title: 'Child2'
      },
      canActivate: [AuthGuard],
      canDeactivate: [CanDeactivateGuard]
    },
]}

Answer 1

你可以在你的根组件中注入Router，然后订阅它的事件。 示例：

constructor(private router : Router) {
    this.router.events.subscribe((event) => {
        if(event instanceof NavigationStart) {
            console.log(event);
            console.log(event.url);
        }
    });
}

您应该检查您的事件是NavigationStart 还是NavigationEnd 的实例，因为您的事件会触发几次次。