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