html - 有没有办法突出显示点击的 mat-tab？当动态生成每个 mat-tab 时

Question

我在 UI 中动态显示 mat-tabs，其数量和数据随着后端值的变化而变化。它们是动态生成的。单击任何一个 mat-tab 都会调用一个函数并将 ID 传递给它以继续。我想识别已被点击的 mat-tab 并保持突出显示，直到用户被路由到另一个页面。

我试过 mat-tab:active{background-color: #333} 但没用

    <mat-tab-group [selectedIndex]="Index" (selectedTabChange)="tabChanged($event)" style="width:100%" #Tabgroup>
          <div *ngFor="let item of items; let last = last;" class="button">
            <mat-tab>
              <ng-template mat-tab-label>
                <span class="XYZ" id="item.Id"
                  (click)="setmodule(item.Id)">{{item.Name}}</span>
              </ng-template>
            </mat-tab>
          </div>
    </mat-tab-group>

没有错误信息!但是没有满足要求。

Answer 1

您应该将点击的选项卡 ID 存储在一个变量中，然后像这样使用 ngClass :

<mat-tab-group [selectedIndex]="Index" (selectedTabChange)="tabChanged($event)" style="width:100%" #Tabgroup>
      <div *ngFor="let item of items; let last = last;" class="button">
        <mat-tab [ngClass]="{'tab-selected': selectedTabId==item.id}">
          <ng-template mat-tab-label>
            <span class="XYZ" id="item.Id"
              (click)="setmodule(item.Id)">{{item.Name}}</span>
          </ng-template>
        </mat-tab>
      </div>
</mat-tab-group>

在你的风格中:

.tab-selected
{
  background-color: #333;
  // Some styles
}