css - Router Link Active 在以下情况下不起作用，他们是否有任何替代方法来动态激活按钮？

Question

HTML代码

<div class="card-header">
  <h5>Refill by date</h5>
  <div class="card-header-right">
    <nav class="navbar bg-faded ">
      <ul class="nav navbar-nav">
        <li class="nav-item" routerLinkActive="active">
          <button (click)="setView('branch'); getFranchiseRefillsByDateAndBranch()" class="btn btn-mini btn-bg-c-blue btn-outline-default btn-round btn-action">
          <i class="icofont icofont-ui-check"> By branch</i>
          </button>
        </li>
        <li class="nav-item" routerLinkActive="active">
          <button (click)="setView('product'); getFranchiseRefillsByDateAndProduct()" class="btn btn-mini btn-bg-c-blue btn-outline-default btn-round btn-action">
          <i class="icofont icofont-ui-check"> By product</i>
          </button>
        </li>
        <li class="nav-item" routerLinkActive="active">
          <button (click)="setView('list'); getFranchiseRefillsByDateAndList()" class="btn btn-mini btn-bg-c-blue btn-outline-default btn-round btn-action">
          <i class="icofont icofont-ui-check"> Refill list</i>
          </button>
        </li>
      </ul>
    </nav>
  </div>
</div>

部分TS代码

  getFranchiseRefillsByDateAndBranch() {
    this.items = [];
    var hrchyIds = this.jwtHelperService.getFRefillHrchyIds();
    var ym = this.localStorage.retrieve('frym');
    if (hrchyIds) {
      this.refillService.getFranchiseRefillsByDateAndYear(hrchyIds, ym, "branch", this.page, this.rec).subscribe(val => {
        this.items = val;
      });
    }
  }

CSS代码

.nav-item.active button i{
    color: #3D94CD !important;
}

我正在尝试使用事件路由器链接更改事件按钮的颜色，但这种方法在这种情况下不起作用，它们是根据当前点击动态添加类的任何替代方法。

Answer 1

如果此元素上有 routerLink，则 routerLinkActive 会起作用。

在 ts 文件中保留 currentActiveItem 变量。设置一些默认值说“分支”

currentActiveItem : string = "branch"

在 setView 函数中更改此变量的值。

另外还使用 ngClass 作为对应的 li 元素。

[ngClass]="{'active' : currentActiveItem == 'branch'}"
[ngClass]="{'active' : currentActiveItem == 'product'}"
[ngClass]="{'active' : currentActiveItem == 'list'}"