Question

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

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

例如，我必须绑定属性＆＃34; background＆＃34;对于每个浏览器到ngStyle：

client_credentials

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

任何想法？

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

同一属性NgStyle中的多个值

1 个答案: