routerLinkActive不适用于导航栏

Question

我正在使用角12，并试图使导航条激活动态，但它不工作。

码

<nav class="navbar navbar-expand-lg navbar-light bg-light" >
  <div class="container-fluid">
    <a class="navbar-brand" style="color: blue;">User Name</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link active" routerLinkActive="active" href="" >Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLinkActive="active" (click)=onAdminProject() >Projects</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLinkActive="active" (click)=onAdminAccount()  >Account</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLinkActive="active"  >Courses</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLinkActive="active" (click)= onAdminAbout() >About</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

.ts on AdminProject()

 onAdminProject(){
    this.account=false
    this.projectsdisplay=true
    this.about=false
    
  }

请帮帮忙

Answer 1

<nav class="navbar navbar-expand-lg navbar-light " >
  <div class="container-fluid">
    <a class="navbar-brand" style="color: blue;">User Name</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link active" routerLink="/slider" routerLinkActive="active" >Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/amcharts" routerLinkActive="active"   (click)=onAdminProject() >Projects</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/gallery" routerLinkActive="active" (click)=onAdminAccount()  >Account</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/notification" routerLinkActive="active"  >Courses</a>
        </li>
        <li class="nav-item">
          <a class="nav-link"routerLink="/filter" routerLinkActive="active" (click)= onAdminAbout() >About</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 2

只有在同一元素或其子元素上有一个routerLinkActive时，routerLink才有意义。

您的链接根本不使用routerLink。