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