Я хотел бы вставить некоторый HTML, который я извлекаю с моего сервера в элемент DOM в angular2. Кажется, я не могу найти лучший/правильный способ сделать это.
Я не могу просто поместить {{my_data}} в шаблон, потому что angular 2 автоматически удалит HTML.
Я попытался написать директиву html-unsafe, которая просто присваивает значение непосредственно innerHTML элемента:
/// <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);
}
}
Итак, теперь в моем шаблоне есть что-то вроде
<td [html-unsafe]="my_data"></td>
Это работает, но я не уверен, что это правильный способ сделать это, и setTimeout кажется странным обходным решением. Без setTimeout кажется, что this.elem.nativeElement
фактически не ссылается на элемент DOM, а на какой-то временный элемент.
Есть ли более "правильный" способ angular2 просто вставить HTML в DOM? Почему мне нужно обернуть манипуляцию DOM в setTimeout?