Angular nav-link перестает работать после активации routerLinkActive

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>

У меня есть 4 элемента в списке sidebarItems, и он генерирует 4 nav-ссылки.Когда первый активен, остальные три не работают, а когда один из трех других активен, первый не работает.

Первый активен, второй не работает

Третий активный, второй работает

Третий активный, первый не работает

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 на margin для #dashboard[_ngcontent-xsb-c0] на 200px.Stackblitz обновлен.