eckig 2: Ändern der statischen Teile der Ansicht nach Pfad

Question

Zunächst tut mir leid für den komischen Titel. Ich konnte keine bessere Zusammenfassung finden.

Also was ich will, ist eine Anwendung zu erstellen, die aus einer grundlegenden 3-Teil-Struktur (Header/Inhalt/Fußzeile) besteht. Abhängig von der Route, die aktiv ist, sollte sich der Header-Teil ändern (jeder Header ist eine Komponente für sich).

Bisher ist der Header, der von einer [ngSwitch] Erklärung in der „mainApp.component“ und sieht wie folgt bestimmt wird angezeigt:

<span [ngSwitch]="currentLocation"> 
    <span *ngSwitchWhen="'/login'"><login-header></login-header></span> 
    <span *ngSwitchWhen="'/home'"><home-header></home-header></span> 
</span> 
<div class="content"><router-outlet></router-outlet></div> 
<app-footer></app-footer> 

Wo die „mainApp.component.ts“ sieht wie folgt aus :

import { Component, OnInit } from '@angular/core'; 
import {ROUTER_DIRECTIVES} from '@angular/router'; 
import {HomeHeaderComponent} from './home-header'; 
import {LoginHeaderComponent} from './login-header'; 
import {FooterComponent} from './footer'; 
import {Router} from '@angular/router'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app', 
    templateUrl: 'mainApp.component.html', 
    styleUrls: ['mainApp.component.css'], 
    directives: [HomeHeaderComponent, LoginHeaderComponent, FooterComponent, ROUTER_DIRECTIVES], 
    providers: [] 
}) 

export class mainApp implements OnInit { 
    public currentLocation: string; 
    constructor(public router: Router) { 
    this.currentLocation = location.pathname; 
    } 

    ngOnInit() { 

    } 
} 

Dies funktioniert nur gut, wenn ich auf meine localhost:4200/login oder localhost:4200/home manuell gehen, wie es die mainApp.component, Schecks macht, die die aktuelle Route und zeigt dementsprechend den Header. Wenn ich jedoch die Route z. ein Tastenklick über

<span class="btn btn-default headerButton homeButton" (click)="navigateToHome()"></span> 

Wo navigateToHome() ist einfach

navigateToHome() { 
    this.router.navigate(['/home']); 
} 

Der Header die gleiche wie die Änderungserkennung bleibt nicht die Routenänderung in concideration nicht nehmen und daher nicht nicht erneut ausführen die [ngSwitch]/rerender die mainApp.component.

Ich dachte schon darüber nach, den Header in die Komponentenvorlage einzufügen, zu der sie gehören, aber wenn es einen Weg gibt, es in der Hauptkomponente zu tun, würde ich das bevorzugen.

Wenn ihr irgendwelche Ideen habt, wie man das löst, oder Wege, es besser zu machen/eine andere Art und Weise/die Art und Weise, wie es sich bewährt, bin ich froh, davon zu hören.

Danke.

Answer 1

Die hier Antwort ist wie so auf die Router-Ereignisse abonnieren:

this.router.events.subscribe((e) => {e instanceof NavigationEnd? this.currentLocation = '/' + e.url.split('/')[1] : ''}); 

Dies abonniert den Routern Veranstaltungen im Allgemeinen und ändert die Current Variable, wenn die Navigation erfolgreich beendet durch die URL-Eigenschaft des zurück Überprüfung Wert.

Ich implementierte dies in der (zur Zeit dieses Beitrags) aktuellen Router-Version @ angular/routerv3.0.0-alpha8, die gut funktioniert.