Angular ngstyle stripping -webkit-

Question

下面的代码可以在Chrome中工作，但它似乎剥离了-webkit-、-moz-或-o-，这使我无法在所有浏览器中正确显示它。

[ngStyle]="{'-webkit-transform': 'rotate(' + ((marks.result * 1.8) - 90) + 'deg)'}"

编译成style="transform: rotate(-59.4deg);"

我需要它保留原始代码的方式，它输出为style="-webkit-transform: rotate(-59.4deg);"。我如何才能做到这一点？

Answer 1

我相信您将需要使用DomSanitizer bypassSecurityTrustStyle。请看这个答案：Dynamic CSS Styles with Vendor Prefixes in Angular 2

默认情况下，Angular会规范化类名并删除供应商前缀。以下是该答案的代码片段：

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

它还显示了如何使用它：

<div [style]="stylish"></div>

我不确定您是否可以使用ngStyle，或者是否需要使用ngStyle。

您可能需要做一些更改，因为答案是几年前的，但我相信这是您最终需要做的