在根组件

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的实例，因为您的活动会启动几次次。