所以我有一些帶圖標(biāo)的有角度的標(biāo)簽，我希望活動(dòng)標(biāo)簽的圖標(biāo)不同于非活動(dòng)標(biāo)簽的圖標(biāo)。我看到活動(dòng)選項(xiàng)卡有一個(gè)類& quotMDC-tab-active & quot；非活動(dòng)選項(xiàng)卡有一個(gè)類別& quotmat-MDC-tab-禁用& quot但由于某種原因，我的CSS沒(méi)有得到應(yīng)用。

例如，使用這樣的標(biāo)簽:

<mat-tab [disabled]=false>
<ng-template mat-tab-label>
<mat-icon class="example-tab-icon lockopen">lock_open</mat-icon>
<mat-icon class="example-tab-icon lockclosed">lock</mat-icon>
Title
</ng-template>
<ng-container>
Contents
</ng-container>
</mat-tab>

<mat-tab [disabled]=true>
<ng-template mat-tab-label>
<mat-icon class="example-tab-icon lockopen">lock_open</mat-icon>
<mat-icon class="example-tab-icon lockclosed">lock</mat-icon>
Title
</ng-template>
<ng-container>
Contents
</ng-container>
</mat-tab>

為什么我不能這樣做CSS和顯示/隱藏正確的圖標(biāo):

.mdc-tab--active .lockclosed{
display:none;
}
.mat-mdc-tab-disabled .lockopen{
display:none;
}

CSS沒(méi)有被應(yīng)用，我假設(shè)(猜測(cè))是因?yàn)榻嵌葮?biāo)簽的活動(dòng)和禁用類是動(dòng)態(tài)添加的，所以CSS不能在頁(yè)面加載時(shí)直接指向元素？

如果我只是做一個(gè)正常的& quot。lock open { display:none；} & quot它確實(shí)隱藏了一個(gè)圖標(biāo)，所以我知道目標(biāo)是正確的，CSS應(yīng)該工作，但沒(méi)有。

活動(dòng)選項(xiàng)卡總是在變化，所以我不能添加我自己的類到選項(xiàng)卡中，我需要使用Angular創(chuàng)建的類來(lái)確定一個(gè)選項(xiàng)卡是否是活動(dòng)的，但是它們似乎不起作用。

我該如何解決這個(gè)問(wèn)題？

Angular生成的CSS的作用域是那個(gè)特定的組件，所以它們不能以子組件為目標(biāo)(除非我們使用像不贊成使用的ng-deep這樣的東西)。生成的css樣式如下所示:

.mdc-tab--active[_ngcontent-yfi-c543] .lockopen[_ngcontent-yfi-c543] {/* your styles */}

類的實(shí)際元素。mdc-tab - active可能沒(méi)有_ngcontent屬性，所以沒(méi)有應(yīng)用樣式。

從你截取的代碼來(lái)看，你似乎使用了angular的材料組件。他們文檔中的例子建議使用& ltmat-tab & gt；內(nèi)部& ltmat-tab-group & gt；。& ltmat-tab-group & gt；支持所選索引的雙向綁定。通過(guò)混合使用that和ng模板來(lái)減少重復(fù)，我們可以得到這樣的結(jié)果:

<mat-tab-group [(selectedIndex)]="activeIndex">
  <mat-tab>
    <ng-template mat-tab-label>
      <ng-container
        *ngTemplateOutlet="tabIcon; context: {active: activeIndex === 0}"
      ></ng-container>
      First
    </ng-template>
    Content 1
  </mat-tab>

  <mat-tab isActive="true">
    <ng-template mat-tab-label>
      <ng-container
        *ngTemplateOutlet="tabIcon; context: {active: activeIndex === 1}"
      ></ng-container>
      Second
    </ng-template>
    Content 2
  </mat-tab>
</mat-tab-group>
<ng-template #tabIcon let-active="active">
  <mat-icon
    class="example-tab-icon"
    [ngClass]="{'example-tab-icon-rotated': active}"
    >thumb_up</mat-icon
  >
</ng-template>

以上代碼是Angular Material文檔中的一個(gè)示例的修改版本。

工作堆棧鏈接

如果您在組件中有一個(gè)可用的選項(xiàng)卡列表作為變量，您甚至可以通過(guò)循環(huán)遍歷選項(xiàng)卡來(lái)使代碼更加簡(jiǎn)潔，而不是為每個(gè)選項(xiàng)卡手動(dòng)傳遞條件，如activeIndex === 1