Question

我希望为我的应用程序的用户提供设置纯CSS样式的可能性，并且这些样式定义应立即应用于某些HTML元素。

例如，我有一个textarea绑定到我的组件中的模型：

<textarea #customCss></<textarea>

在同一个组件中，我定义了一个HTML元素，对于该HTML元素，我想让用户可以分配纯CSS并允许用户立即预览样式元素。所以基本上，我会期待类似下面的东西（由于style属性是readonly，因此无效）：

<div style="{{ customCss.value }}">CUSTOM STYLED DIV</div>

因此，当用户在textarea中输入background:black;color:red;时，我希望样式元素的HTML将呈现为：

<div style="background:black;color:red;">CUSTOM STYLED DIV</div>

我认为没有机会直接在这里使用ng-style指令，因为它需要一些JSON代码而不是纯CSS代码。

那么我如何在Angular4中解决这个问题？

Answer 1

可能最简单的方法就是绑定属性：

<div [attr.style]="customCss.value">CUSTOM STYLED DIV</div>

Answer 2

Niles的建议让我重回正轨，谢谢你。

之前我已经尝试[attr.style]="..."但没有成功，但问题是生成的CSS呈现为＆＃34;不安全＆＃34; （至少在Safari中），请参阅this 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>

如何在Angular4中添加一些用户输入定义的自定义CSS？

2 个答案: