Angular 的 *ngIf 在重新路由时不起作用

Question

我对 *ngIf 在 Angular 中的工作方式有疑问。我有一个导航栏组件进行检查，应该根据 true/false 响应呈现不同的列表，它在这方面工作正常，但在路由到不同页面后它停止工作，直到我再次刷新页面。

HTML:

   <div *ngIf="isUserValid(); then logged_in else logged_out"></div>
      <ng-template #logged_out>
        <ul class="dropdown-menu  dropdown-menu-dark dropdown-menu-end" aria-labelledby="navbarDropdown">
          <li>
            <p class="dropdown-item">You are not logged in!</p>
          </li>
          <li><hr class="dropdown-divider"></li>
          <li>
            <a class="dropdown-item" routerLink="/login"> Login </a>
          </li>
          <li>
            <a class="dropdown-item" routerLink="/signup"> Sign-Up </a>
          </li>
        </ul>
      </ng-template>
      <!-- If user is logged in -->
      <ng-template #logged_in>
        <ul class="dropdown-menu  dropdown-menu-dark dropdown-menu-end" aria-labelledby="navbarDropdown">
          <li>
            <p class="dropdown-item">Hi, [user's name]</p>
          </li>
          <li><hr class="dropdown-divider"></li>
          <li>
            <a class="dropdown-item" (click)="quit()" routerLink="/login"> Sign-Out </a>
          </li>
        </ul>
      </ng-template>

TS（这是单击退出时发生的情况）：

  quit(): void{
    this.is_valid_user = false;
    localStorage.clear();
    this.router.navigate(['login']).then(r => console.log('user quit'));
  }

  isUserValid(): boolean{
   return this.is_valid_user;
  }

当您点击注销按钮时，它应该重定向并显示已注销的块，但它什么也不显示，只有在页面刷新后才会显示。感谢任何帮助。

Answer 1

在angular中你必须知道一个组件被初始化一次。路由器 link 不会更改组件的状态。完全刷新再次启动 angular 生命周期。所以我假设你的“isUserValid()”只执行一次。你能提供完整的打字稿文件吗？您将“isUserValid()”方法放在哪里？

Answer 2

你也可以简化你的 *ngIf:

 <ng-container *ngIf="isUserValid(); else logged_out">
   <ul class="dropdown-menu  dropdown-menu-dark dropdown-menu-end" aria-labelledby="navbarDropdown">
      <li>
        <p class="dropdown-item">Hi, [user's name]</p>
      </li>
      <li><hr class="dropdown-divider"></li>
      <li>
        <a class="dropdown-item" (click)="quit()" routerLink="/login"> Sign-Out </a>
      </li>
    </ul>
</ng-container>
<ng-template #logged_out>
    <ul class="dropdown-menu  dropdown-menu-dark dropdown-menu-end" aria-labelledby="navbarDropdown">
      <li>
        <p class="dropdown-item">You are not logged in!</p>
      </li>
      <li><hr class="dropdown-divider"></li>
      <li>
        <a class="dropdown-item" routerLink="/login"> Login </a>
      </li>
      <li>
        <a class="dropdown-item" routerLink="/signup"> Sign-Up </a>
      </li>
    </ul>
  </ng-template>

Angular 的 *ngIf 在重新路由时不起作用

Angular's *ngIf doesn't work on a re-routing

angular-ng-if

angular

angular-router