如何添加由Angular4中的某些用户输入定义的自定义CSS?

汤姆

我想让我的应用程序用户可以设置纯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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在Angular4中导入自定义字体

如何由用户自定义 FullCalenderBundle [Symfony4]

如何创建具有由用户输入定义的长度的静态数组?

如何使用循环在 Visual Basic 上多次打印由用户输入定义的语句

当用户输入某些内容时如何设置自定义输入状态结构 React js

如何让用户添加自定义注释?

如何在Angular中的单个Toast消息中添加自定义CSS?

如何在TinyMCE 4中的自定义按钮上添加自定义类addButton()

如何在nextjs中添加自定义Css

如何通过Angular中的自定义指令添加mattooltip

如何使用用户输入定义变量值

在CSS中添加自定义字体

如何将自定义css代码添加到由python Bokeh save()生成的独立HTML文件中?

angular4材质表中的自定义验证器结果错误

如何查看由自定义策略创建的用户的数据?

Django - 如何在 DRF 中向某些用户授予自定义权限?

如何通过输入定义函数中的变量?

如何自定义由ThemeBuilder生成的主题的CSS?

在Select2 4.x中输入自定义用户选项?

php -laravel如何从用户输入保存自定义数据

AngularJS:在自定义contenteditable指令中限制用户输入

如何在 CSS 中自定义导航栏中的某些项目?

如何使用 css 为输入和自定义图标添加阴影

如何在Rails 4中添加要设计的自定义字段并自定义注册控制器?

如何在“自定义键盘”中输入自定义字体作为输入

如何在Angular中为自定义验证器添加自定义验证错误消息

如何通过输入框添加自定义文本

输入定义的变量

如何为用户添加自定义路线