动态CSS样式与供应商前缀的角2

Question

比方说，我想要写在角2一个组件，它有两个输入参数：colorOne和colorTwo。什么成分应该做的是填补了<div>用这两种颜色的渐变。

如果我只是想给div一个背景颜色colorOne这不会是一个问题，我可以只使用<div [style.background]="colorOne" class="my-box"></div>。但是，如果我想给它一个背景梯度，我不知道如何做到这一点很好，因为需要background-gradient被厂商前缀。我能想到的唯一解决方案是检查使用哪种浏览器。例如：

public get headerColor() { 

    //... determine the browser 

    let backgroundStyle = `linear-gradient(left top, ${this.colorOne}, ${this.colorTwo})`; 
    if (isWebkit) { 
     backgroundStyle = "-webkit-" + backgroundStyle; 
    } else if (isO) { 
     backgroundStyle = "-o-" + backgroundStyle; 
    } else if (isMoz) { 
     backgroundStyle = "-moz-" + backgroundStyle; 
    } 

    return backgroundStyle; 

    }; 

然后使用<div [style.background]="headerColor" class="my-box"></div>。有没有比这更好的解决方案？

Answer 1

你可以返回一个包含所有不同的前缀值的单串;只有相关的人会被使用：

<div [style]="stylish" class="my-box"></div> 

import { DomSanitizer } from '@angular/platform-browser'; 

... 

constructor(private sanitizer: DomSanitizer, ...) { ... } 

get stylish() { 
    let basicStyle = `linear-gradient(left top, ${this.colorOne}, ${this.colorTwo})`; 
    return this.sanitizer.bypassSecurityTrustStyle(` 
     background: -o-${basicStyle}; 
     background: -moz-${basicStyle}; 
     background: -webkit-${basicStyle}; 
    `); 
}