Angular ngstyle 剥离 -webkit-答案

【问题标题】：Angular ngstyle stripping -webkit-Angular ngstyle 剥离 -webkit-
【发布时间】：2020-03-22 12:41:33
【问题描述】：

下面的代码在 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);" 的方式保留原始代码。我怎样才能做到这一点？

【问题讨论】：

你在做实验室吗？:D
这能回答你的问题吗？ Convert number to degrees in ngStyle using Angular 8
@VolodymyrBilyachat - it 如何回答他的问题？
我们实际上是在合作一个项目。最后一切正常，但我们刚刚意识到ngStyle 将-webkit-transform 剥离为transform，这会禁用我们的速度计在编译的PDF 中工作。所以我们需要一个解决方案来找出一种方法来禁用剥离-webkit-。谢谢。
@ConnorsFan 我首先认为这是一种实验室，因为今天已经提出了类似的问题。

标签： angular ng-style

【解决方案1】：

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

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

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。

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

【讨论】：

这不起作用。我得到这个而不是style="ng-reflect-ng-style="SafeValue must use [property]="
@NikitaGupta 你的代码是什么样的？您需要使用属性绑定语法[style]="..."。注意style 周围的方括号。
这是完整的代码：<div class="needle" style="background-image: url('http://example.com/assets/images/needle.png')" [ngStyle]="{'transform': 'rotate(' + ((marks.result * 1.8) - 90) + 'deg)','-webkit-transform': 'rotate(' + ((marks.result * 1.8) - 90) + 'deg)','-moz-transform': 'rotate(' + ((marks.result * 1.8) - 90) + 'deg)','-ms-transform': 'rotate(' + ((marks.result * 1.8) - 90) + 'deg)','-o-transform': 'rotate(' + ((marks.result * 1.8) - 90) + 'deg)'}"></div>
您需要在使用DomSanitizer.bypassSecurityTrustStyle 方法的component.ts 类中添加一个函数或getter。就像我在回答中提供的那样。
您使用的是[ngStyle] 还是[style]？如果是 ngStyle，请尝试样式。