Вставка HTML с сервера в DOM с помощью angular2 (общие манипуляции с DOM в Angular2) [дубликат]
На этот вопрос уже есть ответ здесь:
Угловое связывание HTML 16 ответовЯ хотел бы вставить 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?