Angular 2，如何在更改后重新加载组件？

Question

我遇到路由问题：当我成功登录时，路由器导航到HomeComponent但HeaderBar没有任何更改，需要刷新页面（f5）才能看到更改。谁能帮我？我不想使用window.location.reload()

以下示例代码：

1. 我有一个组件：HeaderBar（HomeComponent的一部分） - 包括按钮Login / Logout。

   <ul class="nav navbar-nav navbar-right" *ngIf="!isLoggedIn">
        <li>
          <button [routerLink]="['/login']">Login</button>
        </li>
    </ul>
   
    <ul *ngIf="isLoggedIn">
        <li>
          <button (click)="logout()">Logout</button>
        </li>
    </ul>
   
   constructor() {
     this.isLoggedIn = localStorage.getItem('username') ? true : false;
   }
   

2. 我有其他组件：LoginComponent。

   <button (click)="login()"></button>

   constructor(private router: Router) {}
   
   login(): void {
         localStorage.setItem('username','myname');
         this.router.navigate(['/']);    //Navigate to the home component
   }