时间戳

首页 > 解决方案 > routerLinkActive 激活后，Angular nav-link 停止工作

html - routerLinkActive 激活后，Angular nav-link 停止工作

问题描述

<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 个导航链接。当第一个处于活动状态时，其他三个不起作用，而当其他三个中的一个处于活动状态时，第一个不起作用。

第一个有效，第二个不起作用

第三部活跃，第二部作品

第三个有效，第一个不起作用

标签： htmlangular

解决方案

您需要删除标签div内部并将您移动到ul*ngFormli

<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分叉和工作 stackblitz

编辑：您的解决方案适用于足够宽的显示器，因为您的样式与窗口宽度一致。您需要在样式上做很多工作，但快速解决方法是将其更改为padding200像素。Stackblitz 更新。margin#dashboard[_ngcontent-xsb-c0]

推荐阅读