在角度模板中有条件地应用多个 css 规则的替代语法？答案

【问题标题】：Alternative syntax to apply several css rules conditionally in an angular template?在角度模板中有条件地应用多个 css 规则的替代语法？
【发布时间】：2021-03-26 10:44:47
【问题描述】：

我想有条件地应用内联样式，其中包含多个 css 规则（所有规则仅依赖于一个条件）。

大多数时候，我会想转
(1)：

<div style="color: gray; opacity: 0.8"></div>

到(2)：

<div [ngStyle]="(condition) ? {'color': 'gray', 'opacity': '0.8'} : {}"></div>

并且经常（但不总是），我可能想重构为外部 css 文件，并根据需要添加类，
(3)：

.my-class {
    color: gray;
    opacity: 0.8;
}

第 2 步的语法是否可能比第 1 步和第 3 步更相似（以避免无用的 css 字符串重构：'color: gray; opacity: 0.8;' 到 'color': 'gray', 'opacity': '0.8'）。

接近于：

<div {{ condition | styleIf:'color: gray; opacity 0.8' }}></div>

我知道它那么不好，但重构舞有点不方便和尴尬。
如果没有，我打算写一个管道，但我更愿意在重新发明轮子之前先问一下。

【问题讨论】：

标签： angular angular-template

【解决方案1】：

如果您对使用 ts 文件中的样式毫不犹豫，可以尝试以下方法。

在您的模板中：

<div [ngStyle]="customStyleObject()">My Content</div>

在组件中定义函数以返回样式。

customStyleObject(): Object {
    if (<your condition here>) {
      return { color: "yellow", opacity: 0.8, background: "red" };
    }
    return {};
}

您可以根据需要返回上述字符串、数组或对象。

Stackblitz - https://stackblitz.com/edit/ngstyle-examples-j6n3zh?file=src/app/app.component.ts

【讨论】：

【解决方案2】：

你可以有一个变量

customStyle={
    color: gray,
    opacity: 0.8
}

并使用

<div [ngStyle]="condition?customStyle:null">my div</div>
//or
<div [class.my-class]="condition">my div</div>

嗯，你可以有另一个变量

applyclass:boolean=false

并写一些如此“怪诞”的东西

<div [ngStyle]="condition && !applyclass?customStyle:null" [class.my-class]="condition && aplyclass">
   My Content
</div>

【讨论】：