如何在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中損壞。

在運行時設置“紅色”和“藍色”，這就是為什么我將它們直接綁定到元素。 因此，將它們放在類中不是一種選擇。

如何使用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>