在angular中使用::ng-deep on mat-toggle时，attr绑定不起作用
在angular中使用::ng-deep on mat-toggle时，attr绑定不起作用
提问于 2020-11-23 21:35:46
我想要更改一个CSS类的'content‘属性，这个类应用于angular的Slide-Toggle。
这是我的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中硬编码值，那么它可以正常工作，但无法动态绑定字符串。
请帮帮忙。
Stack Overflow用户
发布于 2020-11-23 23:16:52
问题是attr()不会深入到子元素来设置值……它只适用于selected element。
对描述中指定selected element的MDN的引用。
函数的作用是:检索selected element属性的值，并在样式表中使用它。它还可以用于伪元素，在这种情况下，将返回伪元素的原始元素上的属性值。
考虑到这一点，您需要将属性值设置到CSS变量中以供以后使用。
使用以下方法，因此答案可能是一个可行的解决方法。
通过属性选择器添加要在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);
}堆栈
https://stackblitz.com/edit/angular-azgink-dvthvu?file=src/app/slide-toggle-configurable-example.css
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64969490
复制相关文章
相似问题
腾讯云开发者
