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

【问题标题】：Angular's *ngIf doesn't work on a re-routingAngular 的 *ngIf 在重新路由时不起作用
【发布时间】：2021-08-11 14:27:59
【问题描述】：

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

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

当您单击注销按钮时，它应该重定向并显示已注销的块，但它什么也不显示，并且仅在页面刷新后才显示。任何帮助表示赞赏。

【问题讨论】：

这能回答你的问题吗？ How to reload the current route with the angular 2 router

标签： angular angular-router angular-ng-if

【解决方案1】：

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

【讨论】：

将方法 isUserValid() 添加到问题中。 quit() 和 isUserValid() 在同一个组件 TS 文件中。 isUserValid() 确实在重新路由时被调用（我用日志对其进行了测试）但 html 似乎没有正确呈现
好的，谢谢。然后 isUserValid() 方法将只执行一次或通过刷新页面来执行。我从来没有做过那个特定的功能，但你要做的是，听“导航变化”，然后检查用户是否有效。也许这可以帮助：newbedev.com/…
这有帮助，我使用了 sn-p，然后强制 Angular 通过 ChageDetectorRef 检测更改

【解决方案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>

【讨论】：