Вставка HTML с сервера в DOM с помощью angular2 (общие манипуляции с DOM в Angular2)

10

Я хотел бы вставить некоторый 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?

Теги:
angular
dom

2 ответа

7

Чтение этой статьи http://www.beyondjava.net/blog/angularjs-2-0-sneak-preview-data-binding/ с ноября 2014 года.

ng-bind-html becomes [innerHTML].

Вы можете попробовать с этим.

  • 2
    Хотя это работает для простых тегов HTML, таких как <b> Hello! </ B>, оно не работает для директив Angular, которые вы создали сами. В Angular 1.x вы использовали $ sce.trustAsHTML () в сочетании с пользовательской директивой, которая называется $ compile, для компиляции директив Angular в вашем HTML. Нам нужно знать эквивалент этого в Angular 2.
  • 2
    Я думаю, что это сейчас [innerHTML] .
Показать ещё 2 комментария
0

Я смог сделать это следующим образом:

<td bind-inner-html="my_data"></td>
  • 4
    Я думаю, что это сейчас [innerHTML] .

Ещё вопросы

Сообщество Overcoder
Наверх
Меню