动态CSS样式与供应商前缀的角2
问题描述:
比方说,我想要写在角2一个组件,它有两个输入参数:colorOne
和colorTwo
。什么成分应该做的是填补了<div>
用这两种颜色的渐变。动态CSS样式与供应商前缀的角2
如果我只是想给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>
。有没有比这更好的解决方案?
答
你可以返回一个包含所有不同的前缀值的单串;只有相关的人会被使用:
<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};
`);
}
感谢,这个作品!我想这一点,但没有消毒,所以也没当我尝试过的工作。 – bersling