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中中断了。

“red”和“blue”在运行时设置，这就是我将它们直接绑定到元素的原因。所以把它们放在课堂上不是一种选择。

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

Answer 1

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

<强> component.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';
}

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

<强> component.html

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

如何在NgStyle对象中生成回退值

1 个答案: