是否可以在 Angular/TypeScript 中的 HTMLElement.style.variable 上使用变量？答案

【问题标题】：Is using a variable on HTMLElement.style.variable in Angular/TypeScript possible?是否可以在 Angular/TypeScript 中的 HTMLElement.style.variable 上使用变量？
【发布时间】：2020-01-15 13:51:02
【问题描述】：

我尝试在 Angular 组件中实现 updateStyle(...) 方法。使用此方法，应为具有唯一 ID 的特定元素设置样式。以下代码-sn-p导致：

“CSSStyleDeclaration”类型上不存在属性“变量”。

无论如何都可以进行角度编译，因此变量在运行时填充了合法值，还是我必须为每个样式声明实现该方法，我将使用该方法？

updateStyle(id, variable, value){

  var components = document.querySelectorAll("[id]") as NodeListOf<HTMLElement>;

    for(var i = 0; i < components.length; i++) {

      if(components[i].getAttribute("id") == id) {

         components[i].style.variable = value;

}}}

【问题讨论】：

这能回答你的问题吗？ changing css style dynamically from component in Angular 5
不幸的是，这篇文章是相反的。我想让它保持打开状态，无论是颜色、填充、描边还是该方法要处理的任何内容。
您预计何时运行updateStyle？
例如在特定的点击事件或 setIntervall 循环中的变量达到特定值时。

标签： html angular typescript styles

【解决方案1】：

您可以将变量放在方括号中，如下所示：

updateStyle(id, 变量, 值) {

    var components = document.querySelectorAll("[id]") as NodeListOf<HTMLElement>;

    for (var i = 0; i < components.length; i++) {

        if (components[i].getAttribute("id") == id) {

            ***components[i].style[variable] = value;***

        }
    }
}

【讨论】：

这是一种不好的做法。 Angular 为样式操作提供了不同的 api。
您能否推荐这些 API，以便验证您的声明
很抱歉一开始没有提供。见Docs: Biding types and targets。您可以使用模板绑定来设置样式。不必要地操作 DOM 是一种不好的做法。