javascript - 如何在 NgStyle 对象中创建后备值

Question

在 html 中我可以使用 ngStyle写:

<some-element [ngStyle]="objExp">...</some-element>

objExp 返回的地方

    return {
        "background": "red"
    };

这有效，并将元素的背景变为红色。

有时我想要备用值。例如，如果我正在处理渐变，我需要 -webkit-linear-gradient , -o-linear-gradient然后 linear-gradient .我无法将具有相同键的多个值添加到 javascript 对象。

我猜到了

return { "background": ["red", "blue"] }

但这似乎行不通。我也试过 { "background: "red, blue" }

我不想使用 <some-element [ngStyle]="{'font-style': styleExp}">...</some-element>因为这会将复杂性重复加载到我的 html 中。我不能使用 [style]="expresionThatGivesAString"因为它在 Safari 中中断。

“红色”和“蓝色”是在运行时设置的，这就是我将它们直接绑定(bind)到元素的原因。因此，将它们放在类里面不是一种选择。

如何使用 ngStyle 设置多个背景值？

Answer 1

对于复杂的规则，请改用 ngClass 指令。在您的组件样式中设置类

组件.css

.gradient1 {
  background: -webkit-linear-gradient(red, yellow);
  background: -o-linear-gradient(red, yellow);
  background: -moz-linear-gradient(red, yellow);
 }

.gradient2 {
  background: -webkit-linear-gradient(black, white);
  background: -o-linear-gradient(black, white);
  background: -moz-linear-gradient(black, white);
 }

您的组件应该确定哪个类是事件的；该类依次应用 CSS 中定义的回退值。

component.ts

// Will determine which class to apply.
getClass(){
  return someCondition ? 'gradient1' : 'gradient2';
}

然后在您的模板中，只需通过绑定(bind)到函数结果来应用该类。

component.html

<some-element [ngClass]="getClass()">...</some-element>