Question

假设我想在Angular 2中编写一个包含两个输入参数的组件：colorOne和colorTwo。该组件应该做的是用这两种颜色的渐变填充<div>。

如果我只想给div colorOne背景色，那就不会有问题，我可以使用<div [style.background]="colorOne" class="my-box"></div>。但是，如果我想给它一个背景渐变，我不知道怎么做得很好，因为background-gradient需要以供应商为前缀。我能想到的唯一解决方案是检查javascript使用哪个浏览器。类似的东西：

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

Angular 2中包含供应商前缀的动态CSS样式

1 个答案: