是否可以向Angular Material选项卡添加自定义类？

Question

在Angular 6中，我使用Angular Material通过Tabs显示一些数据。

<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>

无论IsActivebar 的属性是true还是，我都希望标签的样式不同false。

我已尝试使用[ngClass]="bar.IsActive ? 'bar-on' : 'bar-off'"如上所示，但未添加该类。

尽管有这样的尝试，我还是尝试了更简单的方法，class = 'bar-on'但是即使这样也没有添加该类。

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

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

Answer 1

是的，可以通过使用ng-template代替label.

ngClass第一个选项卡上的示例。闪电战

<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>

Answer 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>