eckig 2 - Informationen von der aktiven Komponente

Question

Ich habe eine Seite mit einem Header und einem Körper. Die Kopfzeile hat einen HILFE-Knopf, der die Dokumentation öffnen soll. Der Link zur Dokumentation wird durch eine Hilfe-ID parametriert, die davon abhängt, welche Seite gerade angezeigt wird.

Ich muss aktualisiert werden help-id in Header je nachdem, welche Komponente derzeit von einem Router angezeigt wird. Mit anderen Worten, was ist der richtige Weg, um diesen Parameter (der eine einfache Zeichenkette ist) von der aktuell aktiven Komponente zu erhalten?

Ich habe gesehen, dass die Kommunikation mit einem Service gemacht wird, aber es scheint, ein Service für solch eine einfache Aufgabe ist ein bisschen ein Overkill.

Ich habe versucht, etwas von Router und ActivatedRoute Code abzuleiten, aber ich konnte nichts arbeiten. Die Navigationsereignisse enthalten keinen Verweis auf die Komponente. routerState.root.firstChild ist null, wenn die App geladen wird.

EDIT:

hier, in der AppComponent Ich brauche die aktuelle Hilfe-ID

export class AppComponent { 
    private helpId; 
} 

Meine Komponenten, die in Router-Ausgang angezeigt werden, diese Eigenschaft haben, z.B.

export class HeroComponent { 
    const helpId = 'hero'; 
} 

export class HeroDetailsComponent { 
    const helpId = 'hero-details'; 
} 

Es gibt Routen für jede Komponente definiert, zum Beispiel

const heroesRoutes: Routes = [ 
    { path: 'heroes', component: HeroComponent }, 
    { path: 'hero/:id', component: HeroDetailsComponent } 
]; 

Ich brauche die Hilfe-ID der aktuell angezeigten Komponente (vom Router gemacht), um die Hilfe-Link zu halten Kopfzeile aktuell Die Help-ID wird in Route Params nicht übergeben.

Answer 1

Es kann mit der ActivatedRoute tatsächlich getan werden.

Sie müssen es in Ihrer Komponente injizieren:

contructor(private route: ActivatedRoute) {} 

Und dann müssen Sie zu routen Änderungsereignis hören, so etwas wie:

ngOnInit() { 
    this.route.params.subscribe(params => { 
     // route info is stored in `params` 
     console.log(params); 
    }); 
}