NgStyleと同じプロパティ複数の値

Question

私はAngular 4を使用していて、ngStyleで変数に基づいてHTML要素にスタイルをバインドしようとしています。しかし、ブラウザに互換性がないため、この問題は解決しました。

どのブラウザのユーザーが使用しているかチェックせずに、同じCSSプロパティに3つの異なるスタイルをバインドするにはどうすればよいですか？ exempleについては

、私は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は、コンポーネントのgetters/propertiesです。

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; 
}