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

【问题标题】：Is it possible to apply dynamic style as string in Angular?是否可以在 Angular 中将动态样式作为字符串应用？
【发布时间】：2017-11-17 11:53:15
【问题描述】：

我有一个，我想对其应用动态样式。

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

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

或

myStyle = 'background-color: red;'

我希望它会像这样工作

但它没有。

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

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

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

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

【问题讨论】：

你也试过吗？
是的，我做到了。它呈现为没有style 属性的普通
好像有点奇怪，你有没有试过使用 ViewChild 来获取 span 并通过 ts 应用样式？
不，我没试过。什么是'ts'？打字稿？
是的，ts 是 typescript 的缩写，也是 typescript 文件的文件扩展名

标签： css angular styles

【解决方案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>

WORKING DEMO

【讨论】：

谢谢，这正是我所需要的！
很高兴听到这个消息。 :)
来自@hiper2d 的重新设计的答案？
@user1767316 ，没有任何东西被重新设计我正在同时创建演示，bypassSecurityTrustStyle 是解决方案，我提供了更好的解决方案。这就是为什么OP接受了我的回答。您不能仅通过比较答案来直接判断。

【解决方案2】：

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

constructor(private sanitizer: DomSanitizer) {
}

sanitizeStyle() {
    return this.sanitizer.bypassSecurityTrustStyle('background-color: red');
}

<span [style]="sanitizeStyle()">

【讨论】：

这应该可以，但是由于问题中描述的原因，这不适合我的需要。
抱歉，错过了。试试我的另一个解决方案。
谢谢，这正是我需要的！

【解决方案3】：

我想我会采取将传入的css字符串转换为样式对象，然后使用[ngStyle]将其应用于的方式

【讨论】：