当我在 Bootstrap 导航栏中使用 *ngSwitch 时，样式消失了答案

【问题标题】：When I use *ngSwitch in a Bootstrap navbar the styling disappears当我在 Bootstrap 导航栏中使用 *ngSwitch 时，样式消失了
【发布时间】：2020-07-10 04:28:47
【问题描述】：

<ul class='nav navbar-nav'>
                <li class='nav-item'>
                    <ul [ngSwitch]='isLoggedIn' class='nav-item'>
                      <li *ngSwitchCase=true>
                        <a routerLink='/home' id='home' class='nav-item'>Home</a>
                      </li>
                      <li *ngSwitchCase=false>
                        <a routerLink='/login' id='home' class='nav-item'>Home</a>
                      </li>
                    </ul>
                </li>
.
.
.
.

当 isLoggedIn 被切换时，链接会发生变化，但在此设置下，链接本身没有引导样式。

【问题讨论】：

标签： angular bootstrap-4 navbar ng-switch

【解决方案1】：

当您只有 2 个案例时，为什么要使用 ngSwitch？看起来有点矫枉过正。更重要的是，您在另一个 ul.nav 内有一个 ul.nav... 为什么不这样做：

<ul class="nav navbar-nav">
  <li *ngIf="isLoggedIn">
    <a routerLink="/home" id="home" class="nav-item">Home</a>
  </li>
  <li *ngIf="!isLoggedIn">
    <a routerLink="/login" id="login" class="nav-item">Login</a>
  </li>
</ul>

【讨论】：

你大错特错了！！对于*ngIf，将检查每个条件并执行真正条件内的代码。对于 [ngSwitch]，只会执行特定案例中的代码（使用 break;）。所以，[ngSwitch] 会更快。
Every view that matches is rendered. -- angular.io/api/common/NgSwitch#description walker 如何知道哪个视图匹配？检查条件:) 但无论如何，我仍然坚持我写的内容——ngSwitch 不应该在这里使用。