样式不适用于 innerHTML 的角度

我将 html 作为 innerHTML 传递给我的视图

<div [innerHTML]="someHtmlCode"></div>

如果我通过下面的代码，它工作正常。

this.someHtmlCode = "<div><b>This is my HTML.</b></div>"

如果我传递下面的代码，其中包含颜色，它是不工作的。

 this.someHtmlCode = '<div style="background-color: blue;"><b>This is my HTML.</b></div>';
131598 次浏览
小开

我不使用内联样式，而是将样式放在类中。

不确定是否使用 class是一个选项，但这里有一个 Plunker 小样。

HTML:

this.someHtmlCode = '<div class="demo"><b>This is my HTML.</b></div>'

CSS:

.demo{
background-color: blue;
}

在根 css 文件中定义类 demo，通常称为 styles.scss。

小开
最佳答案

你现在的行为很正常。添加到 innerHTML的类被忽略，因为默认情况下封装是 Emulated。这意味着 Angular 可以防止样式在组件内部和外部进行拦截。 您应该将组件中的封装更改为 None。 这样，你就可以在任何你想定义的地方定义类: 在 styles内部或者在一个单独的 .css、 .scss或者 .less样式表中(没关系) ，Angular 会自动将它们添加到 DOM 中。

import { Component, ViewEncapsulation } from '@angular/core';


@Component({
selector: 'example',
styles: ['.demo {background-color: blue}'],
template: '<div [innerHTML]="someHtmlCode"></div>',
encapsulation: ViewEncapsulation.None,
})
export class Example {
private someHtmlCode = '';


constructor() {
this.someHtmlCode = '<div class="demo"><b>This is my HTML.</b></div>';
}
}
小开

我也面临着同样的问题，但是在阅读了下面的链接之后，我找到了解决方案，而且没有使用管道

希望这个能帮到你。

Https://netbasal.com/angular-2-security-the-domsanitizer-service-2202c83bd90


提交答案