Angular 2：如何从另一个组件访问ActivatedRoute快照数据

我正在使用Angular2 Material Toolbar，我想将当前页面标题传递给它。Angular 2：如何从另一个组件访问ActivatedRoute快照数据

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

现在我想从我的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？

来源

2017-02-22 Hristo Eftimov

这是因为'header.component'不是*路由组件*。没有与之关联的路由，因此没有“数据”。你看过*路由器事件*（如[本博客文章]（https://toddmotto.com/dynamic-page-titles-angular-2-router-events）中所述） – AngularChef

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

来源

2017-02-22 17:52:15

对于'router.firstChild'它返回我'null'。我知道我做错了，请给我一个例子，请:) –

然后它可能是一个没有子路线的叶子段。尝试'router.root.firstChild' –

不幸的是，它再次返回'null' –

Angular 2：如何从另一个组件访问ActivatedRoute快照数据

回答

相关问题