javascript - 如何在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 上的 token

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

我遇到的问题是我无法更新导航栏以更改正确的状态(它仍然有效，我有 token 但我必须刷新整个页面才能更新导航栏)

如何以 Angular 方式更新导航栏？谢谢

Answer 1

据我了解您的问题是:如何在用户登录后隐藏位于主要组件上的“登录”链接

我可以考虑如下解决方案:

在您的 AuthService 中，您可以添加公共(public) bool 成员“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希望对你有帮助...