Wert von LoginComponent zu RootComponent übergeben

Question

Ich habe Probleme mit * ngIf zum Entfernen der Login/Logout in der Navbar. Wenn ich mich angemeldet habe, sollte der Logout-Link ausgeblendet sein. Bitte sehen Sie meine Einrichtung.

app.component.ts

import { Component, OnInit } from '@angular/core'; 

import { UserService } from './user'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit{ 
    title = 'app works!'; 

    loginstatus: boolean = false; 

    constructor(private _userService: UserService, private _router: Router){} 

    onLogout(){ 
    this._userService.logout(); 
    this._router.navigate(['/login']); 
    } 

    ngOnInit(){ 
    this.onLogout(); 
    } 
} 

app.component.html

<ul class="navigation"> 
    <li *ngIf="!loginstatus"><a routerLink="/login" routerLinkActive="active">Login</a></li> 
    <li *ngIf="loginstatus"><a (click)="onLogout()">Logout</a></li> 
</ul> 

<router-outlet></router-outlet> 

login.component.ts

import { Component, OnInit } from '@angular/core'; 
import { FormGroup, FormBuilder, Validators} from '@angular/forms'; 

import { UserService } from '../user.service'; 

@Component({ 
    selector: 'login', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.css'] 
}) 

export class LoginComponent implements OnInit{ 
    user = { 
     username: '', 
     password: '' 
    } 

    loginForm: FormGroup; 

    constructor(private _userService: UserService, private _formBuilder: FormBuilder){} 

    ngOnInit(){ 
     this.loginForm = this._formBuilder.group({ 
      username: ['', Validators.required], 
      password: ['', Validators.required] 
     }); 
    } 

    onLogin(){ 
     this._userService.postUserLogin(this.user) 
      .subscribe(token => { 
       console.log(localStorage.getItem('currentUser')); 
      }) 
      err => console.log(err); 
    } 
} 

Wie wir sehen, kann ich die Variable bin mit loginstatus um festzustellen, ob der Benutzer angemeldet ist oder nicht. Jetzt ist meine Frage von der Login-Komponente, wie kann ich den Wert loginstatus ändern, um die Anmeldung von der Navbar zu verbergen?

Answer 1

Das Hauptproblem hier ist, dass Sie nicht wirklich eine value teilen möchten; Sie möchten das Ereignis, wenn es geändert wird. Das Ereignis könnte ein echtes Ereignis sein, das z.B. EventEmitter oder rxjs oder eine Standard-Winkeländerungserkennung mit ngOnChanges.

z. RX Thema erstellen.

export const loginStatusChanged = new BehaviorSubject<boolean>(false); 

, die von Standard-Benutzereinrichtung nicht angemeldet

Dann in der app.component zum Ereignisse abonnieren:

import { loginStatusChanged } from ...; 

... 

loginStatus: boolean; 

... 

ngOnInit() { 
    loginStatusChanged.subscribe(status => this.loginStatus = status); 
} 

und in login.component

... 
// when logged in 
loginStatusChanged.next(true); 
... 

Man kann hier argumentieren, dass es besser ist, dies mit einem Service zu tun. Könnte sein. Vielleicht nicht. Ich denke, in diesem speziellen Fall spielt es keine Rolle. Es funktioniert, es ist immer noch leicht zu testen, auch ohne Injektion.

Eine kleine Erinnerung: wenn es nicht die AppComponent wäre, wäre es sinnvoll unsubscribe von Observable oder ng2-rx-collector (sorry, Anzeigen: D). Hier ist es nicht wirklich notwendig, da AppComponent nur zerstört wird, wenn Sie die gesamte App herunterfahren.

Answer 2

Eine Möglichkeit ist üblich Dienst zu schaffen, die zwischen Ihrem LoginComponent und AppComponent und mit diesem Service geteilt Sie zwischen LoginComponent und AppComponent kommunizieren können. Überprüfen Sie Parent and children communicate via a service Dokumentation.