Angulaire: Comment accéder à ActivatedRoute les données de capture à partir d'un autre composant

Je suis en utilisant le Angular2 Matériau De La Barre D'Outils et je veux passer le courant le titre de la page.

Mon app.composant a un composant d'en-tête et la page en cours de composant:

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

export class AppComponent {
  constructor() {}
}

Dans mon app.routage j'ai un objet de routage personnalisé title propriété:

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

Maintenant, je veux accéder à la data.title bien de mon en-tête.composant mais malheureusement, il n'est pas défini. Mon data objet est vide:

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

Si j'essaie d'accéder à la propriété même de la même façon, mais à partir de la HomeComponent ou SettingsComponent il fonctionne très bien:

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

Alors, comment puis-je accéder à la route.snapshot.data['title'] de mon HeaderComponent ?

C'est parce que header.component n'est pas un acheminé composant. Il n'y a aucune route qui y est associé, par conséquent, pas de data. Avez-vous regardé dans les routeur événements (comme décrit dans la ce post?

OriginalL'auteur Hristo Eftimov | 2017-02-22

  1. 6
      constructor(router:Router, route:ActivatedRoute) {
    router.events
    .filter(e => e instanceof NavigationEnd)
    .forEach(e => {
      console.log('title', route.root.firstChild.snapshot.data.title);
    }
  }

    Plunker exemple

    Pour router.firstChild il me renvoie null. Je sais que je fais quelque chose de mal. Pouvez-vous me donner un exemple, s'il vous plaît 🙂
    Ensuite, c'est probablement un segment de feuilles qui n'ont pas d'enfant routes. Essayez router.root.firstChild
    Malheureusement encore, il retourne null
    oui, c'est le lien: plnkr.co/modifier/rBToHRaukDlrSKcLGavh?p=preview
    Il fonctionne parfaitement! Je vais comparer votre solution avec le mien 🙂 Merci!

    OriginalL'auteur Günter Zöchbauer