在 angular 的 mat-toggle 上使用 ::ng-deep 時，attr 綁定不起作用

Question

我想更改應用於 angular 的 Slide-Toggle 的 CSS 類的“內容”屬性。

這是我的 SCSS -

:host .red {
  .mat-toggle {
    ::ng-deep .mat-slide-toggle-bar{
      &::after{
        content: attr(data-active);;
      }
    }
  }
}

這就是我通過 attrs 的方式 -

<div class="red"
attr.data-active="activeData">
    <mat-toggle></mat-toggle>
</div>

如果我在 CSS 中對值進行硬編碼，則它可以正常工作，但無法動態綁定字符串。

請幫忙。

Answer 1

問題是attr()不會深入到子元素來設置值......它只適用於selected element 。

在描述中指定selected element MDN參考。

MDN

attr() CSS 函數用於檢索selected element的屬性值並在樣式表中使用它。 它也可以用於偽元素，在這種情況下，偽元素的原始元素的屬性值被返回。

考慮到這一點，您需要將屬性值設置為 CSS 變量以備后用。

使用此 SO 答案中的以下方法可能是一種可行的解決方法。

通過屬性選擇器添加要在CSS使用的label-attr ，然后通過style="--myLabel:'activeLabel';"設置custom property/CSS variable

<div class="red">
    <mat-slide-toggle style="--myLabel:'activeLabel';" label-attr>
    </mat-slide-toggle>
</div>

在CSS使用屬性選擇器獲取對 CSS 變量的引用，並通過content: var(--myLabel)將其設置為 content。

::ng-deep mat-slide-toggle[label-attr] ::ng-deep .mat-slide-toggle-bar:after {
  content: var(--myLabel);
}

閃電戰