Angular ngstyle 剥离 -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 。 请参阅此答案： Angular 2 中带有供应商前缀的动态 CSS 样式

默认情况下，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 。

您可能需要进行一些更改，因为答案已经有几年了，但我相信这最终是您需要做的