[英]How to pass value from ts file to scss file in same component in angular 2+?
这是我的组成部分
export class myComponent implements onInit {
private outageCount;
ngOnInit(){
....subscribe((data) => {
this.outageCount = Object.keys(data).length;
})
}
我需要在CONTENT
之前将中断计数传递给我的CSS
: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;
}
我怎样才能从我的组件传递outageCount值CSS:之前content
。
任何建议,将不胜感激!
尝试使用:
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;
}
我正在像下面这样在我的html中将其作为属性传递
[attr.outage-count]="outageCount"
我的CSS,我这样更新
:host ::ng-deep app-settings-panel {
&:before{
content: attr(outage-count);
......
}
}
这对我有用! 感谢所有尝试帮助我的人!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.