在angular2中的某些場景下路由后如何更新導航欄

Question

我在導航欄的右側有一個引導導航欄，我有一些鏈接，例如登錄，注銷，注冊，我將其放在了app.component.html.ts中

<div class="navbar-collapse collapse">
// Here i check if user is authenticated, display : Hello abc@gmail.com
<ul *ngIf="user" class="nav navbar-nav navbar-right">
          //code in here
</ul>
// If user is not authenticated, display Login - Register
<ul *ngIf="!user"  class="nav navbar-nav navbar-right">
  <li><a routerLink="/register" id="registerLink">Register</a></li>
  <li><a routerLink="/login" id="loginLink">Log in</a></li>
</ul>     

在login.component.ts中，我調用Authen.Service.ts以獲取存儲在localStorage上的令牌

import { UrlConstants } from './core/common/url.constants';
import { LoggedInUser } from './core/domain/loggedin.user';
import { SystemConstants } from './core/common/system.constants';


@Component({
  selector: 'app-login',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
    export class LoginComponent implements OnInit {
      public user: any;
      private isLoggedIn = false;


  loginUser(valid: boolean) {
    this.loading = true;
    if (valid) {
      const userData = {
        username: this.form.controls.username.value,
        password: this.form.controls.password.value
      }

      this._authenService.login(userData.username, userData.password).subscribe(data => {
        this.user = JSON.parse(localStorage.getItem(SystemConstants.CURRENT_USER));
        // If success redirect to Home view
        this._router.navigate([UrlConstants.HOME]);
      }, error => {
        this.loading = false;
      });

    }
  }  
  ngOnInit() {

  }

}

這是我的Authen.Service.ts

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import 'rxjs/add/operator/map';

import { SystemConstants } from '../common/system.constants';
import { LoggedInUser } from '../domain/loggedin.user';


@Injectable()
export class AuthenService {

  constructor(private _http: Http) {
  }

  login(username: string, password: string) {
    let body = "userName=" + encodeURIComponent(username) +
      "&password=" + encodeURIComponent(password) +
      "&grant_type=password";
    let headers = new Headers();
    headers.append("Content-Type", "application/x-www-form-urlencoded");
    let options = new RequestOptions({ headers: headers });

    return this._http.post(SystemConstants.BASE_API + '/api/oauth/token', body, options).map((response: Response) => {
      let user: LoggedInUser = response.json();
      if (user && user.access_token) {
        localStorage.removeItem(SystemConstants.CURRENT_USER);
        localStorage.setItem(SystemConstants.CURRENT_USER, JSON.stringify(user));
      }
    });
  }

  logout() {
    localStorage.removeItem(SystemConstants.CURRENT_USER);
  }

  isUserAuthenticated(): boolean {
    let user = localStorage.getItem(SystemConstants.CURRENT_USER);
    if (user != null) {
      return true;
    }
    else
      return false;
  }

這是我的app.component.ts

    export class AppComponent implements OnInit {

    // the user object got from localStore 
    ngOnInit() {
        this.user = JSON.parse(localStorage.getItem(SystemConstants.CURRENT_USER));
        console.log(this.user);
      }
}

我遇到的問題是我無法更新導航欄以更改為正確的狀態（它仍然可以工作，我有令牌，但是我必須刷新整個頁面以更新導航欄）

如何以角度方式更新導航欄？ 謝謝

Answer 1

據我了解您的問題是：用戶登錄后如何隱藏位於主要組件上的“登錄”鏈接

我可以考慮如下解決方案：

在您的AuthService中，您可以添加公共布爾成員“ isLoggedIn”：

  @Injectable()
  export class AuthService {
     isLoggedIn = false;
  }

您可以在組件之間共享此服務

在登錄組件內部，您可以在成功登錄后將isLoggedIn設置為true

login(){

 this.auth.isLoggedIn = true

}

在您的app.component中，您可以訂閱路由器的NavigationEnd事件：

 export class AppComponent {
  constructor(
  private router: Router, private auth:AuthService){}

  ngOnInit() {
    this.router.events.subscribe(event => {
      if (event.constructor.name === "NavigationEnd") {
       this.isLoggedin = this.auth.isLoggedIn;
      }
    })
  }

}

然后，在應用程序組件模板中，您可以使用* ngIf =“！isLoggedin”顯示“登錄”菜單

這里是plunker希望它可以幫助...