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

import { Router, ActivatedRoute, NavigationEnd } from "@angular/router";
...
constructor(
    private _router: Router ,
    private _activatedRoute: ActivatedRoute
) {}

ngOnInit() {
    this._router.events
      .filter((event) => event instanceof NavigationEnd)
      .map(() => this._activatedRoute)
      .map((route) => {
        while (route.firstChild) route = route.firstChild;
        return route;
      })
      .filter((route) => route.outlet === 'primary')
      .mergeMap((route) => route.data)
      .subscribe((event) => this.pageTitle = event['title']);
}

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

AngularJS 4 - Communicate between components getting data from routes

angular-ui-router

angular