angular - 如何在元素上设置活动类

Question

我在某些元素上设置活动类时遇到问题。这是一些代码：

<div *ngIf="project">
  <jhi-alert-error></jhi-alert-error>

  <div class="card mb-4">
    <ul class="top-tabs">
      <li>
        <a href="#" [routerLink]="['../', project.id]" [ngClass]="status ? 'active' : ''" (click)="activeMenu($event)">
          <span jhiTranslate="khanbankCpmsApp.project.projectDetail">Төслийн мэдээлэл</span>
        </a>
      </li>

      <li>
        <a href="#" [routerLink]="['cost-estimate']" [ngClass]="status ? 'active' : ''" (click)="activeMenu($event)">
          <span jhiTranslate="khanbankCpmsApp.project.projectCostEstimateTitle">ТӨСӨВТ ӨРТӨГ</span>
        </a>
      </li>

      <li>
        <a href="#" [routerLink]="['engineer-assessment']" [ngClass]="status ? 'active' : ''" (click)="activeMenu($event)">
          <span jhiTranslate="khanbankCpmsApp.project.engineerAssessmentTitle">ТӨСӨВТ ӨРТӨГ</span>
        </a>
      </li>

      <li>
        <a href="#" [routerLink]="['grant']" [ngClass]="status ? 'active' : ''" (click)="activeMenu($event)">
          <span jhiTranslate="khanbankCpmsApp.project.grantTitle">Зээлт олголт</span>
        </a>
      </li>

      <li>
        <a href="#" [routerLink]="['facility']" [ngClass]="status ? 'active' : ''" (click)="activeMenu($event)">
          <span jhiTranslate="khanbankCpmsApp.project.facilityTitle">Зээлт олголт</span>
        </a>
      </li>

      <li>
        <a href="#" [routerLink]="['compliance']" [ngClass]="status ? 'active' : ''" (click)="activeMenu($event)">
          <span jhiTranslate="khanbankCpmsApp.project.complianceTitle">Зээлт олголт</span>
        </a>
      </li>
    </ul>
  </div>
  <router-outlet></router-outlet>
  <router-outlet name="popup"></router-outlet>
</div>

但是当我单击链接时，它会为active每个链接设置类。在我的 .ts 文件中：

status: boolean = false;

activeMenu(event){
    this.status = !this.status;
    event.stopPropagation();   
}

我做错了什么 ？有什么建议吗？

标签： angularangular7

Answer 1

改为使用routerLinkActive。

<a href="#" [routerLink]="['../', project.id]" [routerLinkActive]="active" (click)="activeMenu($event)">

参考：RouterLinkActive