Açısal 2: Başka bir bileşenden ActivatedRoute anlık görüntü verilerine erişme

Question

Angular2 Material Toolbar kullanıyorum ve geçerli sayfa başlığını ona aktarmak istiyorum.

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

: Ben özel title özelliğe sahip bir yönlendirme nesne var benim app.routing yılında

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

export class AppComponent { 
    constructor() {} 
} 

:

Benim app.component bir başlık bileşeni ve mevcut sayfa bileşenine sahip

Şimdi header.component adresinden data.title özelliğine erişmek istiyorum ancak maalesef undefined. Ben aynı şekilde aynı özelliğe erişmeye çalışıyorum ama HomeComponent veya SettingsComponent dan gayet çalışırsa

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

: My data nesnesi boş Yani

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

, nasıl route.snapshot.data['title'] erişebilirsiniz HeaderComponent'dan mı? header.component` bir * değil `çünkü var

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