AngularJS 4 - 私はこのUIきたルート

Question

からデータを取得するコンポーネント間の通信：

を、これは私のコードの構造です：

マイ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> 

私は何をしたいです：

• グラブルートからのタイトルは、新たなルートがpageTitlesidenav.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']); 
}