我想让我的应用程序用户可以设置纯CSS样式,这些样式定义应立即应用于某些HTML元素。
例如,我在组件中有一个绑定到模型的文本区域:
<textarea #customCss></<textarea>
在同一组件中,我定义了一个HTML元素,并希望为该HTML元素赋予用户分配纯CSS的可能性,并允许用户立即预览样式化的元素。因此,基本上,我希望看到类似以下的内容(由于style属性为只读,因此不起作用):
<div style="{{ customCss.value }}">CUSTOM STYLED DIV</div>
因此,当用户输入background:black;color:red;
文本区域时,我希望样式元素的HTML呈现为:
<div style="background:black;color:red;">CUSTOM STYLED DIV</div>
我看不到有任何机会直接在此处使用ng-style指令,因为它将期望一些JSON代码而不是纯CSS代码。
那么我该如何在Angular4中解决这个问题呢?
尼尔斯的建议使我回到了正确的轨道上,谢谢。
我已经尝试[attr.style]="..."
过,但没有成功,但问题是,呈现为“不安全”(至少在Safari浏览器)所产生的CSS,看到这个Github上的问题。
因此,为了完成这项工作,我使用DomSanitizer编写了自己的Pipe。这是代码:
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({name: 'safeStyle'})
export class SafeStylePipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {}
transform(style) {
return this.sanitizer.bypassSecurityTrustStyle(style);
}
}
然后,我们的自定义管道可以照常用于:
<div [attr.style]="customCss.value|safeStyle">CUSTOM STYLED DIV</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句