javascript - NgStyle 中的相同属性多个值

Question

我正在使用 Angular 4 并尝试通过 ngStyle 将样式绑定(bind)到基于变量的 html 元素。但是，由于浏览器不兼容，我最终遇到了这个问题。

如何在不检查用户使用的浏览器的情况下将 3 种不同的样式绑定(bind)到同一个 css 属性？

例如，我必须将每个浏览器的属性“背景”绑定(bind)到 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"
+")",

我尝试创建一个对象数组，并为同一属性的每个样式创建单独的对象，但无法成功绑定(bind)。

有什么想法吗？

Answer 1

对于初学者来说，不可能将对象中的重复键传递给 ngStyle。我会将样式数组创建包装在一个方法中，并添加一些逻辑来检测浏览器。然后，返回创建的样式以避免在 HTML 中像这样进行内联样式计算。

我假设 startval 和 endval 是您组件上的 setter/getter /属性。

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