Wstawianie kodu HTML z serwera do DOM za pomocą metody angleular2 (ogólna manipulacja DOM w Angular2)

Question

Chciałbym wstawić kod HTML, który pobieram z mojego serwera do elementu DOM w angular2. Nie mogę znaleźć najlepszego/poprawnego sposobu na zrobienie tego.

Nie mogę po prostu wstawić {{my_data}} do szablonu, ponieważ kątowy 2 automatycznie opuści kod HTML.

Starałem się napisać dyrektywę HTML-niebezpieczne, które po prostu przypisuje wartość bezpośrednio do innerHTML elementu:

/// <reference path="../../typings/typings.d.ts" /> 

import {Directive} from 'angular2/angular2'; 
import {ElementRef} from 'angular2/core'; 


@Directive({ 
    selector: "[html-unsafe]", 
    properties: ['htmlUnsafe'] 
}) 
export class HtmlUnsafe{ 
    constructor(private elem: ElementRef){ 

    } 

    set htmlUnsafe(value){ 
     setTimeout(() => { 
      this.elem.nativeElement.innerHTML = value; 
     },0); 
    } 
} 

Więc teraz w moim szablonie mam coś podobnego

<td [html-unsafe]="my_data"></td> 

ten działa, ale nie jestem pewien, czy jest to właściwy sposób, a setTimeout wydaje się dziwnym obejściem. Bez setTimeout wygląda na to, że this.elem.nativeElement w rzeczywistości nie odnosi się do elementu DOM, ale do jakiegoś tymczasowego elementu.

Czy istnieje bardziej "poprawny" sposób kątowy2 do prostego wstawiania kodu HTML do DOM? Dlaczego muszę zawijać manipulowanie DOM w setTimeout?

Answer 1

udało mi się zrobić to w następujący sposób:

<td bind-inner-html="my_data"></td> 

Answer 2

Czytając ten artykuł http://www.beyondjava.net/blog/angularjs-2-0-sneak-preview-data-binding/ od listopada 2014

ng-bind-html becomes [innerHTML].

można spróbować z tym.