Angular:如何从另一个组件访问 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'
    }
  }
];

现在我想从我的 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'];
  }
}

那么，如何从我的 HeaderComponent 访问 route.snapshot.data['title'] ？

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