Aufrufen der Komponentenaktualisierung in Angular 2

Question

Ich versuche eine Navigationsleiste zu implementieren, die verschiedene Links basierend darauf anzeigt, ob ein Benutzer angemeldet ist oder nicht.

Ich verwende die angular2-jwt-Bibliothek, die die tokenNotExpired()-Funktion bereitstellt.

Ich habe 2 Routen, /home und /login. Ich habe eine Navbar-Komponente, die außerhalb der <router-outlet> ist, was bedeutet, dass es nur einmal initialisiert wird und nicht jedes Mal, wenn sich die Route ändert.

Nach erfolgreicher Anmeldung rufe ich router.navigate(['/home]) auf. Sowohl das Home als auch das Login überprüfen, ob ein Benutzer in seinen jeweiligen ngOnInit() Funktionen angemeldet ist. Die Home-Komponente kann somit den angemeldeten Benutzer erkennen.

Allerdings kann ich die Navbar nicht aktualisieren, da sie nicht über die Anmeldung informiert ist.

Könnte mir bitte jemand den richtigen Weg erklären, diese Änderungserkennung zu implementieren?

Danke.

Answer 1

Expose Login-Status über Service

@Injectable() 
export class UserAuthService{ 
    userLoggedIn : bool = false; 

    //call this function when login status changes 
    changeLoginStatus(status: bool){ 
     this.userLoggedIn = status; 
    } 
} 

machen Sie da Singletons

@NgModule({ 
    declarations: [ 
    NavbarComponent, 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    routing, 
    ], 
    providers: [UserAuthService], // <-- Provide your service here 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Benutzer Ihren Dienst in Ihrem navbar

import { UserAuthService } from 'path/to/service'; 

export class NavbarComponent { 
    constructor(private authService: UserAuthService) { } // <-- inject service 

    ngOnInit() { } 
} 

so können Sie Ihre Template-Dienst ändern.

<div [hidden]="!authService.userLoggedIn"><a routerLink="/login">login</a></div> 

Aufruf changeLoginStatus Funktion des Dienstes, wenn Änderungen Login-Status.