代码之家 › 专栏 › 技术社区 › Wizeek

是否可以将动态样式应用为角度中的字符串?

styles angular css

Wizeek · 技术社区 · 6 年前

我有一个 <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中,我只需将该字符串传递给velocity模板中的占位符变量。

我几乎有信心,它不能做到我想要的方式,但可能我忽略了一些解决方案。

3 回复 | 直到 6 年前

Vivek Doshi 6 年前

你所需要的就是 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 6 年前

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

constructor(private sanitizer: DomSanitizer) {
}

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

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

Wizeek 6 年前

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

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

1 年前

Kael · 在html表格中显示关系api数据-角度

2 年前