动态设置mat-tab的背景色

Question

我希望能够根据条件设置选项卡的颜色，就像我在带有content类的stackblitz项目中对div所做的那样。如果selectedMarketStatus === marketStatus.Open语句为真，我希望content div和tab都是绿色的。这个是可能的吗？如果是这样，我该怎么做呢？

编辑:更新了闪电战，这类做我想要的，在&-关闭的scss风格不工作在stackblitz，但它在我的项目中工作。

Stackblitz

​

export class TabGroupThemeExample {
  public marketStatus = MarketPurchaseStatus;
  public selectedMarketStatus = this.marketStatus.Open;
  constructor() {}
}

export enum MarketPurchaseStatus {
  BeforeOpen = 0,
    Open = 1,
    AfterClose = 2
}

.content {
  background-color: gray;
}

.open {
  background-color: green;
}

<mat-tab-group class="subscription-market-tabs" [animationDuration]="0" [disableRipple]="true">
  <mat-tab>
    <ng-template mat-tab-label>aaaa</ng-template>
  </mat-tab>
  <mat-tab [disabled]="selectedMarketStatus === marketStatus.AfterClosed">
    <ng-template mat-tab-label>bbbb</ng-template>
  </mat-tab>
</mat-tab-group>
<div class="content" [class.open]="selectedMarketStatus === marketStatus.Open">aaaaaa</div>

​

Answer 1

使用条件样式来实现这一点。我相信这个link会对你有所帮助。

如果添加样式：

<some-element [ngStyle]="{'backgroundColor':  (selectedMarketStatus === marketStatus.Open) ? 'green' : ''}">element</some-element>

如果你有一个类似上面的类，使用下面的代码：

<some-element [ngClass]="{'green': selectedMarketStatus === marketStatus.Open }">...</some-element>

请查看ngStyle和ngClass的angular文档

请查看您的code的此更新版本

Answer 2

我最终为选项卡创建了一个全局样式，并使用父选择器创建了一个“打开”的样式和一个“关闭”的样式，然后我可以在组件中有条件地在这两个样式之间切换。

我还在我的原始帖子中更新了闪电战。

tab-styles.scss:

.subscription-market-tabs {
  &-open {
    /* Removes the bottom border below the tabs */
    .mat-tab-header {
      border-bottom: none;
      /** Hack to hide the border between .mat-tab-body-wrapper and the active tab */
      transform: translateY(1px);
      z-index: 1000;
    }
    // Styling of tabs in the top banner (on the right side) of a coordinet-component
    .mat-tab-list {
      // Remove underline
      mat-ink-bar.mat-ink-bar {
        display: none;
      }
      // Tabs with rounded corners.
      .mat-tab-labels {
        color: black; // TODO: theme color
        .mat-tab-label {
          height: 72px;
          padding: 0 48px;
          border-radius: 10px 10px 0px 0px;
          background-color: #F2F8FF;
          color: black;
          border: 1px solid #D0DCEA;
          font-weight: 600;
          &.mat-tab-label-active {
            border-bottom: none;
            min-width: 160px !important;
            background-color: #D6ECEC; // TODO: theme color
            color: black; // TODO: theme color
            opacity: 1;
            font-weight: 700;
          }
        }
      }
    }
  }
  &-closed {
    /* Removes the bottom border below the tabs */
    .mat-tab-header {
      border-bottom: none;
      /** Hack to hide the border between .mat-tab-body-wrapper and the active tab */
      transform: translateY(1px);
      z-index: 1000;
    }
    // Styling of tabs in the top banner (on the right side) of a coordinet-component
    .mat-tab-list {
      // Remove underline
      mat-ink-bar.mat-ink-bar {
        display: none;
      }
      // Tabs with rounded corners.
      .mat-tab-labels {
        color: black; // TODO: theme color
        .mat-tab-label {
          height: 72px;
          padding: 0 48px;
          border-radius: 10px 10px 0px 0px;
          background-color: #F2F8FF;
          color: black;
          border: 1px solid #D0DCEA;
          font-weight: 600;
          &.mat-tab-label-active {
            border-bottom: none;
            min-width: 160px !important;
            background-color: #E7F0FA; // TODO: theme color
            color: black; // TODO: theme color
            opacity: 1;
            font-weight: 700;
          }
        }
      }
    }
  }
}

<mat-tab-group [class.subscription-market-tabs-closed]="model.selectedMarketStatus === marketStatus.AfterClose || marketStatus.BeforeOpen" 
                [class.subscription-market-tabs-open]="model.selectedMarketStatus === marketStatus.Open"
                [animationDuration]="0">
  <mat-tab [label]="'forecast-and-subscriptions-tab'|translate">
  </mat-tab>
  <mat-tab [label]="'market-and-bid-list-tab'|translate">
  </mat-tab>
</mat-tab-group>

​