Angular 2将html动态添加到DOM，样式不起作用[重复]

Question

您好，我正在尝试从 api 返回的文件中添加 html，这是有效的。我需要帮助的是，当我添加内联样式时它不起作用，但是如果我在 style.css 中创建一个类并将其添加到 html 中，它就会起作用。

所有这些都说，我需要让内联样式正常工作。我想让<span style="color:red;">I am red</span> 工作。

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <button (click)="onClick()">Click To Add Html</button>
    </div>
    <div *ngIf="html!==''" [innerHtml]="html"></div>
  `,
})
export class App {
  name:string;
  html:string=null;

  const htmlConst:string = `<span style="color:red;">I am red</span>`;
  /*
  I have tried [style] = "color:red;"
  style="color:red;"
  */
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }

  onClick():void{
    if(this.html !== ''){
      this.html= this.htmlConst;
    }
    else{
      this.html = '';
    }
  }
}

任何建议都会有所帮助。

Answer 1

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

    @Component({
      selector: 'my-app',
      template: `
        <div>
          <h2>Hello {{name}}</h2>
          <button (click)="onClick()">Click To Add Html</button>
        </div>
        <div *ngIf="html!==''" [innerHtml]="html"></div>
      `,
    encapsulation: ViewEncapsulation.None
    })

请参考https://toddmotto.com/emulated-native-shadow-dom-angular-2-view-encapsulation