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>

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

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

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

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

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

Answer 1

或者，您也可以使用:: ng-deep对其进行搜索。

Answer 2

是的，可以自定义角材组件。如果要在应用程序范围内进行更改，则可以将样式添加到styles.css文件中。

要更改<mat-tab>，请在styles.css中添加一个类

.mat-tab{
// your code
}

OR

//Preferred

mat-tab{
// your code
}

如果您在Google开发人员工具中调试应用，则会看到角形材料组件继承的类的名称与其标签名称相似。最好的方法是检查开发人员工具中的名称。

编辑为您的解决方案：

将此类相应地添加到您的组件中

::ng-deep .mat-tab-label:nth-of-type(1){
    color: green;
    //your code
}

您可以类似地对其他标签进行更改。

Answer 3

API允许您有条件地设置整个color的{{1}}和background-color，而不是单个mat-tab-group。

除非您使用一些易破解的本机JavaScript，否则您将无法实现自己想要的目标。

Answer 4

如果要修改活动标签，请使用以下方法：

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

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

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

Answer 5

按属性定位元素以应用样式

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

Answer 6

您可以..

来代替使用[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>

Answer 7

是的，可以使用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>

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

7 个答案: