角2：別のコンポーネントからActivatedRouteスナップショットデータにアクセスする方法

Question

Angular2 Material Toolbarを使用しています。現在のページタイトルを渡したいと思います。

const APP_ROUTES: Routes = [ 
    { 
    path: '', 
    component: HomeComponent, 
    data: { 
     title: 'Home' 
    } 
    }, { 
    path: 'settings', 
    component: SettingsComponent, 
    data: { 
     title: 'Settings' 
    } 
    } 
]; 

：私はカスタム titleプロパティを持つルーティングオブジェクトを持っている私は、 をapp.routingで

@Component({ 
    selector: 'mi-root', 
    template: ` 
    <mi-header></mi-header> 
    <router-outlet></router-outlet> 
    ` 
}) 

export class AppComponent { 
    constructor() {} 
} 

：

マイapp.componentは、ヘッダ・コンポーネントと、現在のページコンポーネントを持っています

今、header.componentからdata.titleプロパティにアクセスしたいと思いますが、残念ながらそれは未定義です。私dataオブジェクトが空か：

import { Component, OnInit } from '@angular/core'; 
import { ActivatedRoute} from '@angular/router'; 

@Component({ 
    selector: 'mi-header', 
    template: ` 
    <md-toolbar color="primary"> 
     <span class="u-ml">{{title}}</span> 
    </md-toolbar> 
    `, 
    styles: [] 
}) 

export class HeaderComponent implements OnInit { 
    title: string; 

    constructor(private route: ActivatedRoute) { 
    this.title = this.route.snapshot.data['title']; 
    } 
} 

私は同じ方法で同じプロパティにアクセスしようとしたがHomeComponentかSettingsComponentから、それが正常に動作している場合：

import { Component } from '@angular/core'; 
import { ActivatedRoute } from '@angular/router'; 

@Component({ 
    selector: 'mi-settings', 
    template: ` 
    <h1>Welcome to {{title}} screen</h1> 
    `, 
    styles: [] 
}) 

export class SettingsComponent { 
    title: string; 

    constructor(private route: ActivatedRoute) { 
    this.title = route.snapshot.data['title']; 
    } 
} 

だから、どのように私はroute.snapshot.data['title']にアクセスすることができます私のHeaderComponentから？ header.component`が*ではない `ためだ

Answer 1

constructor(router:Router, route:ActivatedRoute) { 
    router.events 
    .filter(e => e instanceof NavigationEnd) 
    .forEach(e => { 
     console.log('title', route.root.firstChild.snapshot.data.title); 
    } 
    } 

Plunker example