Question

这是我的组件

export class myComponent implements onInit {

private outageCount;

ngOnInit(){

    ....subscribe((data) => {
    this.outageCount = Object.keys(data).length;

})
}

我需要在CONTENT

之前将outageCount传递给我的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之前。

任何建议都将不胜感激！

Answer 1

尝试使用：

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

Answer 2

我将此作为属性传递给我的html，如下所示

 [attr.outage-count]="outageCount"

我css，我像这样更新了

   :host ::ng-deep app-settings-panel {
        &:before{
            content: attr(outage-count);
            ......
        }
    }

这对我有用!!感谢所有试图帮助我的人！

如何将值从ts文件传递到角度为2+的同一组件中的scss文件？

2 个答案: