样式不适用于Angular中的innerHTML

Question

我将 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>';

原文由 Chatra 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你得到的这种行为是正常的。添加到 innerHTML 的类被忽略，因为默认情况下封装是 Emulated 。这意味着 Angular 会阻止样式拦截组件的内部和外部。您应该在组件中将封装更改为 None 。 This way, you’ll be able to define classes wherever you want: inside styles or in a separate .css , .scss or .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>';
  }
}

原文由 Unsinkable Sam 发布，翻译遵循 CC BY-SA 4.0 许可协议