如何在Angular 2+中的同一组件中将ts文件中的值传递给scss文件? [英] How to pass value from ts file to scss file in same component in angular 2+?
本文介绍了如何在Angular 2+中的同一组件中将ts文件中的值传递给scss文件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是我的组成部分
export class myComponent implements onInit {
private outageCount;
ngOnInit(){
....subscribe((data) => {
this.outageCount = Object.keys(data).length;
})
}
我需要在CONTENT
:host ::ng-deep app-settings-panel {
&:before{
//content:"4";
content:attr(outageCount);
background: #941313;
position: absolute;
top: 3px;
left: 22px;
border-radius: 50%;
height: 13px;
width: 13px;
border: 1px solid #ffffff;
color: white;
font-size: 8px;
text-align: center;
line-height: 13px;
}
如何在content
之前将outageCount值从组件传递到css:
How can i pass the outageCount value from my component to css :before content
.
任何建议将不胜感激!
推荐答案
尝试使用:
document.documentElement.style.setProperty('-contentvalue',this.outageCount);
document.documentElement.style.setProperty('--contentvalue', this.outageCount);
css
:root {
--contentvalue: 4;
}
:host ::ng-deep app-settings-panel {
&:before{
//content:"4";
content:attr(--contentvalue);
background: #941313;
position: absolute;
top: 3px;
left: 22px;
border-radius: 50%;
height: 13px;
width: 13px;
border: 1px solid #ffffff;
color: white;
font-size: 8px;
text-align: center;
line-height: 13px;
}
这篇关于如何在Angular 2+中的同一组件中将ts文件中的值传递给scss文件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文