動態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}; 
    `); 
}