如何在 Angular 2+ 中将值从 ts 文件传递​​到同一组件中的 scss 文件？

Posted 2023-03-06

【中文标题】如何在 Angular 2+ 中将值从 ts 文件传递​​到同一组件中的 scss 文件？

【英文标题】：How to pass value from ts file to scss file in same component in angular 2+?

【发布时间】：2018-08-29 01:44:39

【问题描述】：

这是我的组件

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 :before content.

任何建议将不胜感激！

【问题讨论】：

为什么不使用 ngClass 或 ngStyle 来设置基于 typescript 值的属性

@IzzoObella 我必须在 :host ::ng-deep app-settings-panel &:before 中更改它。我该如何使用 ngStyle？

可能是/deep/ 帮助你。在类名前添加/deep/

【参考方案1】：

我在我的 html 中将其作为属性传递，如下所示

 [attr.outage-count]="outageCount"

我的css，我是这样更新的

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

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

【讨论】：

你能帮我解决这个问题吗：***.com/questions/65106757/…

我想用同样的方法改变光标值。但我得到的错误是“attr()”只能与内容一起使用。你能帮帮我吗？

【参考方案2】：

尝试使用：

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;
    

【讨论】：

非常感谢这个。我找到了其他方法。让我更新！

@RamyaS 你能告诉我们它对你有用的另一种方式吗？