NgStyle中相同屬性的多個值

Question

我正在使用Angular 4，並試圖通過ngStyle將樣式綁定到基於變量的html元素。但是，在瀏覽器不兼容的情況下，我最終遇到了這個問題。

如何在不檢查瀏覽器用戶使用的情況下將3種不同樣式綁定到相同的css屬性？

對於爲例，我有權約束每個瀏覽器ngStyle屬性「背景」：

"background": "-webkit-gradient(linear, " 
+ "left top," 
+ "right top, " 
+ "color-stop(" + startval + ",#C5C5C5)," 
+ "color-stop(" + startval + ", #EA0A8A), " 
+ "color-stop(" + endval + ", #EA0A8A)," 
+ "color-stop(" + endval + ", #C5C5C5)" 
+ ")", 
"background": "-ms-linear-gradient(left," 
+"#C5C5C5 0," 
+"#C5C5C5 "+startval+"," 
+"#EA0A8A "+startval+"," 
+"#EA0A8A "+endval+"," 
+"#C5C5C5 "+endval+"," 
+"#C5C5C5 1" 
+")", 

我試圖創建對象的數組，也爲同一屬性的每個風格創建單獨的對象，但不能與成功捆綁在一起。

有什麼想法？

Answer 1

對於初學者來說，不可能在對象中有重複鍵將其傳遞給ngStyle。 我會將樣式數組創建包裝在方法中，並添加一些邏輯來檢測瀏覽器。然後，返回創建的樣式，以避免HTML中的內聯樣式計算。

我假設startval和endval是組件上的獲取者/屬性。

isWebkit(): boolean { 
    return window.navigator.userAgent.search(/webkit/i) > 0; 
} 

backgroundGradient(): string[] { 
    let webkitGradient = `-webkit-gradient(linear, left top, right top, 
     color-stop(${ this.startval }, #C5C5C5), 
     color-stop(${ this.startval }, #EA0A8A), 
     color-stop(${ this.endval }, #EA0A8A), 
     color-stop(${ this.endval }, #C5C5C5))`; 

    let msGradient = `-ms-linear-gradient(left, #C5C5C5 0, 
     #C5C5C5 ${ this.startval }, 
     #EA0A8A ${ this.startval }, 
     #EA0A8A ${ this.endval }, 
     #C5C5C5 ${ this.endval }, 
     #C5C5C5 1)`; 

    return isWebkit() && webkitGradient || msGradient; 
}