是否可以在 Angular 中将动态样式应用为字符串？

Question

我有一个<span>想要应用动态风格的对象。

样式存储在类似 css 的string变量中，可以是任意的，例如

myStyle = 'color: white; font-weight: bold;'

或者

myStyle = 'background-color: red;'

我希望它能像这样工作

<span style="{{myStyle}}">

但事实并非如此。

我尝试了不同的选择，但由于不同的原因，似乎没有一个对我有用：

• 我无法将样式放入 .css 文件中并使用类名，因为样式以上述字符串的形式来自服务器
• 使用[style.color]etc. 不适合我，因为我不知道样式可以是什么
• 使用[ngStyle]不适合我，因为它需要类似的对象{'color': 'red', 'font-weight': 'bold'}，而我只有字符串

我将样式存储在字符串中的原因是因为我需要将其应用到服务器上生成的 HTML 中，我只需将该字符串传递给速度模板中的占位符变量即可。

我几乎确信它不能按照我想要的方式完成，但可能我忽略了一些解决方案。

Answer 1

你所需要的只是DomSanitizer和bypassSecurityTrustStyle

组件侧：

import { DomSanitizer } from '@angular/platform-browser';

constructor(private doms : DomSanitizer) {}

newStyle = 'background-color:red';

safeCss(style) {
    return this.doms.bypassSecurityTrustStyle(style);
}

模板面：

<p [style]="safeCss(this.newStyle)">
  Start editing to see some magic happen :)
</p>

工作演示