Aktualisieren von Komponenten aus einer anderen Komponente in angular4

Question

Ich werde versuchen, dies so einfach und so knapp wie möglich zu halten.

Wir verwenden Angular 4. Normalerweise wäre die Lösung das Hinzufügen von Beobachtern in früheren Versionen, aber diese sind nicht mehr in der Nähe, so dass Sie ein wenig Praxiswissen benötigen, um eine Lösung für ein wahrscheinlich einfaches Problem zu implementieren.

Wir haben 3 Komponenten innerhalb unserer main.ts

<header_component></header_component> 
<router_outlet></router_outlet> 
<footer_component></footer_component> 

Datei, so werden wir Probleme haben, wenn sie die Ansichten (Komponenten) auf Protokoll und Abmelden an erfrischenden kommt.

Bei "Anmeldung" wird ein separates router_outlet verwendet und bei erfolgreicher Anmeldung navigieren wir zur Benutzertabelle und dies veranlasst die Init, die Benutzer neu zu laden. Da dies jedoch nur das router_outlet ändert, wird die Kopfzeile nicht aktualisiert, um die Optionen "logout" und "reset password" anzuzeigen. Die Lösung hierfür müsste sowohl auf der headed_component als auch auf dem router_outlet eine Aktualisierung auslösen.

Das zweite Problem ist, dass bei "Abmelden" dies innerhalb der Header_Komponente getan wird, so ändern sich die Optionen in der Kopfzeile zu "Login" und "Passwort vergessen". Das Problem dieses Mal ist, dass das router_outlet nicht aktualisiert wird, um die zusätzliche Funktionalität zu entfernen, die Sie sich beim Anmelden (Bearbeiten, Löschen, Hinzufügen) von Benutzern verschaffen können.

Ich habe die Angular.io angeschaut und die Dokumentation deckt nicht wirklich das Setup, das wir verwenden. Zugegeben, das könnte meine Interpretation sein.

Irgendwelche Ideen werden geschätzt.

Vielen Dank im Voraus

Lewis

UPDATE: Okay, so machen Ich habe auf diese einige Fortschritte aber ich ein bisschen eine Sackgasse getroffen haben

ich das beobachtbare Konzept umgesetzt haben

headerComponent hat constructor(private _loginService: LoginService, private _authService: AuthService) { this.isLoggedIn = _loginService.getLoggedInStatus.subscribe((loggedIn: boolean) => this.changeLoggedInStatus(loggedIn)); }

die usercomponent hat auch viel die gleiche

Die loginService hat `Exportklasse LoginService { @Output() getLoggedInStatus: EventEmitter = new EventEmitter();

isLoggedIn(): Observable<boolean> { 
    var currentUser = JSON.parse(localStorage.getItem('currentUser')); 
    if (currentUser) { 
     this.getLoggedInStatus.emit(true); 
     return (true) as any; 
    } else { 
     this.getLoggedInStatus.emit(false); 
     return (false) as any; 
    } 
} 

On logout i Feuer this.getLoggedInStatus.emit(false) aber dies wird nicht von der usercomponent

irgendwelche Ideen aufgenommen?

Answer 1

Verwenden Sie einen Dienst, der Ihnen den Benutzerstatus i: e zurückgibt, ob der Benutzer angemeldet ist oder nicht.

isLoggedIn(){ 
    return true //if user is logged in 
    or 
    return false // if the user is not logged in 
} 

Dann in Ihrem Header-Komponente können Sie diesen Dienst rufen Sie den Benutzerstatus zu überprüfen und ein Flag auf der Grundlage der Antwort

userFlag = serviceName.isLoggedIn(); 

in der HTML-Datei dieses Flag verwenden, um die gewünschten Etiketten anzuzeigen basierend i am userflag : e, wenn userFlag wahr ist (Benutzer angemeldet) dann

<div *ngIf="userFlag"> 
    display "logout" and "reset password" 
</div> 
<div *ngIf="!userFlag"> 
    display "login" and "forgot password" 
</div> 

Sie können auch einen Versuch zu Angular Obsevables geben