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

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

constructor(private sanitizer: DomSanitizer) {
}

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

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

Answer 2

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

Answer 3

您需要的只是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

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

3 个答案: