使用变量更新 angular 组件内的内部 CSS？

Question

我想通过自定义面板修改页面上的大量样式。当用户点击一个选项时，页面上的内容将根据点击的内容完全改变。

这不能是将 class 附加到父元素并使用 CSS/LESS 进行相应调整的情况。对于这种情况（出于需求原因），CSS 需要在 angular 组件 HTML.

内部

是否可以在组件 TS 中有这样的值：

myNewColour: "red"

然后可以在我的 angular component.html 内部样式 sheet 中使用，像这样？:

<style>
  .myContainer { background: myNewColour }
</style>

<!-- HTML Content -->
<div class="myContainer"> Stuff </div>

如有任何帮助，我们将不胜感激！ :)

Answer 1

"Internal in the HTML template" 被称为内联样式；）除此之外，您可以像这样使用 ngStyle

<tag [ngStyle]="{'background': myNewColour}"></tag>

编辑如果它使您的代码太长，您可以做的只是

let customStyle = {
  'background': this.myNewColour
};

在您的标签中，只需

<tag [ngStyle]="customStyle"></tag>

Use variables to update internal CSS inside an angular component?