有什么方法可以突出显示单击的mat-tab吗？当动态生成每个mat-tab时

Question

我在UI中动态显示mat-tab，它们的数量和数据会随着它们在后端的值的变化而变化。它们是动态生成的。单击任何一个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
}

Answer 2

您可以将背景颜色属性设置为"mat-tab-label-active“类，该属性在特定选项卡变为活动状态时自动设置。

可以使用ng-deep访问这个类，如下所示：

::ng-deep .mat-tab-label-active {
  background-color: #333;
}

但是，如果您在其他组件上也使用了mat-tab，则会影响所有使用mat-tab的组件的样式。为了避免这种情况，您可以将一个类分配给mat-tab-group，并使用它访问mat-tab-label-active类，如下所示：

<mat-tab-group class="menu-tab" [(selectedIndex)]="selectedTabIndex">
  <div *ngFor="let item of menuList">
  <mat-tab>
    <ng-template mat-tab-label>
      <a class="side-nav-link">{{ item.value}}</a>
    </ng-template>
  </mat-tab>
</div>
</mat-tab-group>

在风格中-

.menu-tab ::ng-deep .mat-tab-label-active {
  background-color: #333;
}