在 angular 中无法在不刷新整个页面的情况下更新 Navbar 组件

Question

我有一个导航栏，其中包含以下项目：

欢迎

行政

关于

来源

登录

用户第一次登录时，登录值是“登录”，当用户导航到欢迎组件（或任何其他组件）时，登录值应更改为传递的用户名。但是在导航到欢迎组件时导航栏上的登录值没有改变，仍然显示“登录”。 只有当我刷新页面时，才会显示用户名。 无法弄清楚出了什么问题

以下是我所做的：

导航栏.component.html

    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria- 
         expanded="false">{{username}}<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li class="active"><a (click)="logout()">Logout</a></li>
        </ul>
      </li>
    </ul>

导航栏.component.ts

     constructor(http: Http, public router: Router, private authService: AuthService) {
    this.username = localStorage.getItem('username');

    this.authService.UserName.subscribe(value =>{this.username = value;});
    console.log(this.username)

登录.component.ts

      return this.authService.login(this.model.username, encrypted.toString())
        .subscribe(res => {
          this.authService.UserName.next("xyz");
            this.cdr.detectChanges();
            console.log(this.authService.UserName)

}

认证服务

   public login(username: string, password: string) {
    let authHeader = new Headers({ 'Content-Type': 'application/json' });
    let body = JSON.stringify({ username: username, password: password });
    return this.http.post(this.endPoint.AuthenticationUrl, body, { headers: authHeader })
        .pipe(map((response: Response) => {

            this.username = response.json().username;
            localStorage.setItem('username', this.username);
        },
        (err) => {this.handleError; }));
}

我尝试过组件交互和变化检测。 很确定我遗漏了一些东西，但不确定它是什么。 任何帮助，将不胜感激。

Answer 1

实际上，就我而言，我能够显示用户详细信息，但是当我注销并再次登录时，旧用户名是可见的。 需要刷新浏览器选项卡以显示新登录的用户名。