Wie ändert man die Seitenansicht dynamisch in angular2?

Question

Ich lerne Angular2 und bekomme gerade ein Problem. Auf meiner Seite habe ich einen "Anmelden" -Button. Nachdem sich der Benutzer angemeldet hat, möchte ich ihn in "Abmelden" ändern. Da sich diese Schaltfläche in app.component befindet, wird sie nur einmal geladen. Danke im Voraus.

---

Mein app.component.html

<a *ngIf="signedIn==true" [routerLink]="['Logout']">Log out</a> 
<a *ngIf="signedIn==false" [routerLink]="['Login']">Log in</a> 

App.component.ts

export class AppComponent { 
    constructor(private _loginService: LoginService) {} 
    signedIn: boolean = this._loginService.isSignedIn(); 
} 

Answer 1

Da RxJS gebündelt mit Angular2 in der Ansatz Ich mag die isSignedIn neu zu gestalten wäre Mitglied als Observable und abonnieren Sie es. Beispiel in this plnkr.

Answer 2

Ich glaube, dass Sie einen Shared-Service für diese nutzen sollten, da Sie Routing verwenden und Dies beinhaltet mehrere Komponenten.

Wenn Sie einen Status/eine Eigenschaft zwischen ihnen teilen möchten, müssen Sie ihn zusammen mit einem Observablen/Subjekt hinzufügen, um andere Komponenten zu benachrichtigen, wenn sich der Status ändert. Hier

ist ein Beispiel:

export class LoginService { 
    isSignedIn: boolean; 
    isSignedInSubject: Subject<boolean> = new Subject(); 

    setSignedIn() { 
    this.isSignedIn = true; 
    this.isSignedInSubject.next(true); 
    } 

    setSignedOut() { 
    this.isSignedIn = false; 
    this.isSignedInSubject.next(false); 
    } 
} 

Die Hauptkomponente zum Thema abonnieren kann benachrichtigt werden, wenn die signedIn Zustandsänderungen.

@Component({ 
    (...) 
    template: ` 
    <a *ngIf="signedIn==true" [routerLink]="['Logout']">Log out</a> 
    <a *ngIf="signedIn==false" [routerLink]="['Login']">Log in</a>  
    ` 
}) 
export class AppComponent { 
    constructor(private _loginService:LoginService) { 
    this._loginService.isSignedInSubject.subscribe(isSignedIn => { 
     this.signedIn = isSignedIn; 
    }); 
    } 
} 

Für weitere Informationen, können Sie einen Blick auf diese Frage haver:

• Delegation: EventEmitter or Observable in Angular2