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

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

styles angular css

Wizeek · 技术社区 · 7 年前

我有一个 <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 回复 | 直到 7 年前

Vivek Doshi 7 年前

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

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

constructor(private sanitizer: DomSanitizer) {
}

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

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

Wizeek 7 年前

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

推荐文章

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

3 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

4 月前

Jihed Ben Zarb · 造型角材料日期选择器

5 月前

st_clair_clarke · 为angular v19资源API创建可重复使用的加载器,其中包含2个不同类型的请求参数

5 月前

Ajay Kulkarni · Angular 19-重新路由到子路由未按预期工作

5 月前

Ajay Kulkarni · 路由器与导航上的路线不匹配

5 月前

Jace Johnson · Typescript文件读取的变量类型错误

5 月前

Ole · Angular资源API是否支持为资源添加初始值?

5 月前

Ole · 在使用新的Angular Resource API时取消搜索术语?

5 月前