如何将自定义类添加到 Angular Material 选项卡？答案

【问题标题】：How can I add a custom class to an Angular Material tab?如何将自定义类添加到 Angular Material 选项卡？
【发布时间】：2018-07-11 07:53:57
【问题描述】：

在 Angular 6 中，我使用 Angular Material 来使用 Tab 显示一些数据。

<mat-tab-group>
    <mat-tab 
    *ngFor="let bar of foo.bar" 
    [label]="bar.Name"
    [ngClass]="bar.IsActive ? 'bar-on' : 'bar-off'">
      // ...
    </mat-tab>
  </mat-tab-group>

无论 bar 的 IsActive 属性是 true 还是 false，我都想设置不同的标签样式。

如上图我试过使用[ngClass]="bar.IsActive ? 'bar-on' : 'bar-off'"，但是没有添加类。

出于恶意，我尝试了更简单的class = 'bar-on'，但即使这样也没有添加类。

因此，我想知道，是否可以将自定义类添加到 Angular Material 选项卡？

编辑： IsActive 属性是 foo 对象的属性。它与选项卡的激活状态无关。活动选项卡可以显示带有IsActive = false 的对象，反之亦然。

【问题讨论】：

你有没有想过这个问题？我正在尝试做同样的事情。
有一个问题，但它已关闭github.com/angular/components/issues/9290

标签： angular angular-material2

【解决方案1】：

是的，可以使用ng-template 而不是label。

第一个标签上的ngClass 示例。 stackblitz

<mat-tab-group>
  <mat-tab > 
   <ng-template mat-tab-label>
                <span [ngClass]="{'color-red': isError?'red':'black'}">Security</span>
   </ng-template>
    Content 1 
   </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

【讨论】：

这只影响标签内的一小块区域（围绕跨度文本），所以我不能设置标签的背景色，只能设置跨度的背景色:(

【解决方案2】：

您可以使用 [ngClass] 来突出显示活动选项卡，而不是 ..

.mat-tab-label-active{
//your code...
}

看到这个：https://stackoverflow.com/a/45962498/5319180

还有：https://github.com/angular/material2/issues/5014

编辑：如您所说，获取域特定信息..也许这会有所帮助？

<mat-tab *ngFor="let bar of bars">
     <ng-template mat-tab-label>
          <div [ngClass]="...your conditions">
            bar.heading
          </div>
      </ng-template>
       ...
       ...
  </mat-tab>

【讨论】：

有一个混淆。 IsActive 不是“选项卡是否处于活动状态”，而是域对象的属性，巧合的是，它被称为 IsActive。活动角度选项卡不一定是 IsActive = true 的对象，反之亦然
具有自定义类的嵌套 div 适用于某些类型的 css（例如颜色、字体），但您无法设置该选项卡的特定 mat-tab-label 样式（例如最大宽度、边距）。我试图在最后一个或多个选项卡中放置一个图标，并让“图标选项卡”的宽度正好为 50 像素。用这种方法似乎无法做到这一点。

【解决方案3】：

如果你想修改活动标签，使用这个：

.mat-tab-label-active {
 //your style here
}

如果要修改活动选项卡中的标签样式，请执行以下操作：

 .mat-tab-label-active .mat-tab-label-content {
   //your style here
 }

【讨论】：

【解决方案4】：

您也可以使用 ::ng-deep，谷歌一下。

【讨论】：

【解决方案5】：

通过属性定位元素以应用样式

:host::ng-deep .mat-tab-label[aria-posinset='1']{
    /*apply your css here*/
}

【讨论】：

【解决方案6】：

好像<mat-tab>元素被移除了，所以如果你想给它添加一个CSS类，你可以把标签内容包装在另一个div中，然后将类添加到那个div。

【讨论】：

【解决方案7】：

我使用的是Angular 11 atm，标签类功能是后来引入的，所以我得换个方式。

但通常，对于 Angular 13+，这应该可以通过使用 @Input [labelClass]="my-classname" 来实现。 https://material.angular.io/components/tabs/api

如果您需要对来自 3rd 方导入的元素进行样式设置，最好使用 encapsulation: ViewEncapsulation.none，而不是 ::ng-deep。

【讨论】：