Question

<ul class="nav nav-pills flex-column nav-justified">
  <div id="sidebar-item" *ngFor="let item of sidebarItems">
    <li class="nav-item" routerLink="{{item.url}}">
      <a class="nav-link" routerLink="{{item.url}}" [routerLinkActive]="['active']"><fa-icon [icon]="item.icon" class="fa_icon ml-n3 m-2"></fa-icon>
        <span class="item_title">{{ item.title | uppercase }}</span>
      </a>
    </li>
    <hr>
  </div>
</ul>

我在sidebarItems列表中有4个项目，它会生成4个导航链接。当第一个处于活动状态时，其他三个不起作用，而其他三个处于活动状态时，第一个不起作用。

First active, second doesn't work

Third active, second works

Third active, first doesn't work

Answer 1

您需要删除div标记内的ul，然后将*ngForm移到li

<ul class="nav nav-pills flex-column nav-justified">
    <li class="nav-item" *ngFor="let item of sidebarItems">
      <a class="nav-link" routerLink="{{item.url}}" routerLinkActive="active">
        <span class="item_title">{{ item.title | uppercase }}</span>
      </a>
    </li>
</ul>

在https://stackblitz.com/edit/angular-9oexwb分叉并且正在工作的堆栈闪电战

编辑：您的解决方案可在足够宽的显示器上工作，因为您的样式与窗口宽度相同。您需要在样式上做很多工作，但是快速解决方案是将padding的{{1}}更改为margin为200px。 Stackblitz已更新。

激活routerLinkActive后，角导航链接停止工作

1 个答案: