在 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);
}

闪电战