Angular 4檢測應用程序組件上的更改

Question

我的app.component.ts有導航欄，帶有ngIf ，因此登錄后應該看到注銷按鈕，但這沒有發生，因為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 ？

Answer 1

我在手機上，因此語法可能會略有不同。

如果您創建了登錄服務：

@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;
        }
}

Answer 2

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

登錄時需要設置currentUser屬性。