4種上檢測app.component

我有導航欄在我app.component.ts，與ngIf，所以登錄後，我應該看到註銷按鈕，但沒有發生變化，因爲app.component沒有檢測到變化4種上檢測app.component

app.component.html：

<div> 
    <nav class='navbar navbar-default'> 
    <div class='container-fluid'> 
     <a class='navbar-brand'>{{title}}</a> 
     <ul class='nav navbar-nav'> 
     <li><a [routerLink]="['/welcome']">Home</a></li> 
     <li><a [routerLink]="['/apartments']">Apartments List</a></li> 
     </ul> 
     <div *ngIf="currentUser"> 
     <p class="navbar-text navbar-right"><button (click)="logout()" class="btn btn-default">Log-out</button></p> 
     <p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">{{currentUser}}</a></p> 
    </div> 
    </div> 
    </nav> 
</div> 
<router-outlet></router-outlet>

app.component.ts：

import {Component, OnChanges} from '@angular/core'; 
import {AuthService} from "./shared/auth.service"; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    providers:[AuthService] 
}) 
export class AppComponent { 
    title = 'Product List App'; 
    currentUser: string; 
    constructor(private _authService: AuthService) { 
    this.currentUser = JSON.parse(localStorage.getItem('currentUser')); 
    } 
    logout() { 
    this._authService.logout(); 
    this.currentUser = undefined; 
    } 
}

當我進行登錄，我做的：localStorage.setItem('currentUser',JSON.stringify(user));

但我的app.component未檢測到currentUser已更改，因此我無法看到登錄的用戶名和註銷按鈕。（我需要做的刷新頁面中，爲了看到他們）我怎樣才能解決這個不把登錄功能在我app.component.ts？

來源

2017-10-11 Zakk

什麼這樣做 'this.currentUser = JSON.parse（localStorage.getItem（ 'currentUser'））;' 在ngOnInit或ngViewLoaded中？而不是構造函數？ –

https://plnkr.co/edit/YRz25z7uULhlXdfTlS30?p=preview我認爲這個問題是您的登錄，因爲在構造著作currentUser。 – chrisz

我怎麼觸發currentUser（在app.component）和 – Zakk

我我的手機上，以便語法可能稍有偏差。

如果創建一個登錄服務：

@Injectable() 
export class LoginService { 
    public uname = new Subject<any>(): 
    public uname$ = this.uname.asObservable(); 

    public publishUsername(data: any) { 
     this.uname.next(data); 
}

然後在構造函數：

constructor(private lin: LoginService) { 
    this.lin.uname$.subscribe(
     (data) => { 
      this.currentUser = data; 
     } 
}

來源

2017-10-11 21:39:16 chrisz

當你登錄你正在做的是設置在本地存儲的值。這不會觸發任何更改。當你刷新瀏覽器時，它會在你的構造函數中獲取這個新值並進行渲染。

你需要，當你登錄到設置currentUser屬性。

來源

2017-10-11 21:24:33

4種上檢測app.component

回答

相關問題