Angular 2: Zugriff auf ActivatedRoute Snapshot-Daten von einer anderen Komponente

Question

Ich benutze die Angular2 Material Toolbar und ich möchte den aktuellen Seitentitel daran übergeben.

Mein app.component hat eine Header-Komponente und die aktuelle Seite Komponente:

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

export class AppComponent { 
    constructor() {} 
} 

In meinem app.routing ich ein Routing-Objekt mit benutzerdefinierter title Eigenschaft habe:

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

Jetzt möchte ich auf die data.title Eigenschaft von meinem header.component zugreifen, aber leider es ist undefiniert. Mein data Objekt ist leer:

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']; 
    } 
} 

Wenn ich versuche, die gleiche Eigenschaft mit der gleichen Art und Weise zuzugreifen, sondern von den HomeComponent oder SettingsComponent es funktioniert:

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']; 
    } 
} 

Also, wie kann ich auf die route.snapshot.data['title'] von meiner 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