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