如何使用 Angular 2+ 指令从选项卡自定义背景颜色？

Question

我正在尝试为 'md-tab-group' 中的每个选项卡标签设置不同的背景，如下所示：

`<md-tab-group class="full-width">
      <md-tab>
        <ng-template md-tab-label>
            <md-icon class="em-tab-icons">directions_boat</md-icon>
        </ng-template>
        <p>Slings</p>
     </md-tab>

     <md-tab>
        <ng-template md-tab-label>
            <md-icon class="em-tab-icons">local_gas_station</md-icon>
        </ng-template>

        <p>Fuels</p>
     </md-tab>

     <md-tab>
        <ng-template md-tab-label>
            <md-icon class="em-tab-icons">restaurant_menu</md-icon>
        </ng-template>
        <p>Consumables</p>
    </md-tab>
</md-tab-group>`

我知道 'md-tab-label' 是一个指令，但我知道我不能设置 'id' 或设置 class 来覆盖某些属性。

我检查了 Material Design 使用的 classes，我发现了 class 'mat-tab-labels'。所以，我试着在我的 scss 上这样做：

` .mat-tab-labels:first-child {
    background-color: #E1E8F5;
  }
  .mat-tab-labels:nth-child(2) {
    background-color: #FFD9B9;
  }
  .mat-tab-labels:nth-child(3) {
    background-color: #E6D2C8;
  }`

但是没用。当然，如果我使用这样的东西：

` #md-tab-label-0-0{
    background-color: #E1E8F5 !important;
  }
  #md-tab-label-0-1{
    background-color: #FFD9B9 !important;
  }
  #md-tab-label-0-2{
    background-color: #E6D2C8 !important;
  }`

它有效，但只是在我第一次进入该页面时，id 才发生变化。

那么，有什么想法吗？我必须为此创建指令吗？

Answer 1

您的 .scss 以父容器 div .mat-tab-labels 为目标，它可能没有多个节点。我认为您需要定位的是该父容器中的每个 .mat-tab-label 节点。

如果您将 .scss 文件更新为具有以下内容，那么您的条件颜色应该有效：

`
  .mat-tab-label:nth-child(1) {
    background-color: #E1E8F5;
  }
  .mat-tab-label:nth-child(2) {
    background-color: #FFD9B9;
  }
  .mat-tab-label:nth-child(3) {
    background-color: #E6D2C8;
  }
`

如何使用 Angular 2+ 指令从选项卡自定义背景颜色？

How to Customize background color from Tabs using Angular 2+ directives?

css

background

angular2-directives

angular2-template