样式不适用于Angular 2 Typescript中的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>';

Answer 1

您得到的这种行为是正常的。添加到的类将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>';
  }
}