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
Vous devez vous connecter pour publier un commentaire.
Plunker exemple
router.firstChild
il me renvoienull
. 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