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();   
}

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

Answer 1

改为使用routerLinkActive。

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

参考：RouterLinkActive

Answer 2

在您拥有的每个链接上

[ngClass]="status ? 'active': ''"

如果将status设置为true，它将更新每个ngClass

尝试使用

[routerLinkActive]='active'

或注入组件ActivatedRoute 并做某事

this.activatedRoute.url.subscribe(url => this.currentUrl = url);

和在模板中

[ngClass]="this.currentUrl.includes(router-link-path)? 'active' : ''"

别忘了退订

我无法发表评论，所以我在这里重播

根据how to set active class on elements

您的第一条路线是

''

因此它将始终在启动时处于活动状态

Answer 3

那是因为您对所有元素使用相同的布尔值。整个组件只有一个status，并且每个<a>元素都使用它。

尝试仅在单击的元素上添加类，如下所示：

.ts：

activeMenu(event){
    event.target.classList.add("className")
}

使用这种方法，您可以从组件中删除status布尔值，并在模板中删除[ngClass]

您还可以在每个<a>元素上使用模板变量，或者可以像提到的其他答案一样使用路由（因为您的示例仅适用于使用routerLink的<a>元素）。就您而言，routerLinkActive可能是最好的方法

希望有帮助：）

Answer 4

使用Bootstrap

npm我引导

在angular.json文件中添加以下行：projects-> architect   ->样式“样式”：[                 “ node_modules / bootstrap / dist / css / bootstrap.min.css”，                 “ src / styles.css”               ]

用户routerLinkActive =“活动”

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <ul class="nav nav-tabs">
        <li role="presentation"
            routerLinkActive="active"
            [routerLinkActiveOptions]="{exact: true}">
          <a routerLink="/">Home</a>
        </li>
        <li role="presentation"
            routerLinkActive="active">
          <a routerLink="servers">Servers</a>
        </li>
        <li role="presentation"
            routerLinkActive="active">
          <a [routerLink]="['users']">Users</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

如何在元素上设置活动类

4 个答案:

.ts：