Угловой 2: Как получить доступ к данным моментального снимка ActivatedRoute от другого компонента

Question

Я использую Angular2 Material Toolbar, и я хочу передать ему текущий заголовок страницы.

Мой app.component имеет компонент заголовка и текущий компонент страницы:

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

export class AppComponent { 
    constructor() {} 
} 

В моей app.routing У меня есть объект маршрутизации с пользовательскими title собственности:

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

Теперь я хочу получить доступ к data.title собственности из моего header.component, но, к сожалению, он не определен. Мой 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?

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