AngularJS 4 - 在从路径获取数据的组件之间进行通信

Question

我有这个UI：

这是我的代码结构：

我的app.routes.ts：

import { Routes } from '@angular/router';
import { HomeComponent } from './home';
import { AboutComponent } from './about';
import { NoContentComponent } from './no-content';

import { DataResolver } from './app.resolver';

export const ROUTES: Routes = [
  { path: '',      component: HomeComponent, data: { title: 'Dashboard' } },
  { path: 'home',  component: HomeComponent, data: { title: 'Home' } },
  { path: 'detail', loadChildren: './+detail#DetailModule'},
  { path: '**',    component: NoContentComponent },
];

我的sidenav.component.html在模板上有一个pageTitle变量，如下所示：

<md-sidenav-container fullscreen>
    <md-sidenav #sidenav mode="side" class="app-sidenav">

        <menu-list #menuList></menu-list>

    </md-sidenav>

    <md-toolbar color="primary">
        <button md-icon-button (click)="sidenav.toggle()">
            <md-icon>menu</md-icon>
        </button>

        <div>{{ pageTitle }}</div>

    </md-toolbar>

    <main class="app-content">
        <router-outlet></router-outlet>
    </main>

</md-sidenav-container>

我想做的是：

• 每次触发新路线时从路线中抓取标题

• 将标题放在pageTitle sidenav.component.ts变量上

我应该使用服务事件在组件之间进行通信吗？ 每次路线被解雇时获得头衔的最佳和简单方法是什么？

提前谢谢。

祝你好运， 马塞洛

Answer 1

如果您订阅了Router.events

，该怎么办？

npm install -g npm@4.6.1