Angular 2 Ajout dynamique de html au DOM, le style ne fonctionne pas

Question

Bonjour J'essaye d'ajouter du HTML à partir d'un fichier qui est retourné par l'API, cela fonctionne. ce que j'ai besoin d'aide est quand j'ajoute un style inline cela ne fonctionne pas, mais si je crée une classe dans le style.css et l'ajoute au html cela fonctionne alors.

Tout cela dit, j'ai besoin de travailler en ligne. Je voudrais obtenir <span style="color:red;">I am red</span> de travail.

@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 = ''; 
    } 
    } 
} 

tout conseil serait utile.

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 
    }) 

S'il vous plaît se référer de https://toddmotto.com/emulated-native-shadow-dom-angular-2-view-encapsulation