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

Question

我有一个<span>，我想应用动态样式。

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

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

或

myStyle = 'background-color: red;'

我希望它像

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

但事实并非如此。

我

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

• 我无法将样式放在.css文件中并使用类名，因为样式以上述字符串的形式来自服务器
• 使用[style.color]等不适合我，因为我不知道风格是什么
• 使用 [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>

工作演示

Answer 2

Angular 提供了 DomSanitizer 服务，可以将字符串转换为样式对象。我认为这正是您的情况。

constructor(private sanitizer: DomSanitizer) {
}
sanitizeStyle() {
    return this.sanitizer.bypassSecurityTrustStyle('background-color: red');
}
<span [style]="sanitizeStyle()">

Answer 3

我想

我会把传入的 css 字符串转换为样式对象，然后使用 [ngStyle] 将其应用于<span>