web-dev-qa-db-ja.com

angle2を使用してサーバーからDOMにHTMLを挿入する（Angular2での一般的なDOM操作）

サーバーから取得したHTMLをangular2のDOM要素に挿入したいと思います。私はこれを行うための最良の/正しい方法を理解できないようです。

angular 2は自動的にHTMLをエスケープするため、{{my_data}}をテンプレートに入れることはできません。

要素のinnerHTMLに直接値を割り当てるだけのhtml-unsafeディレクティブを書き込もうとしました。

/// <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要素を参照するのではなく、ある種の一時要素を参照します。

HTMLをDOMに挿入するだけのより「正しい」angular2の方法はありますか？ DOM操作をsetTimeoutでラップする必要があるのはなぜですか？

javascriptangulardomtypescript
11
imagio

この記事を読む http://www.beyondjava.net/blog/angularjs-2-0-sneak-preview-data-binding/ 2014年11月から。

ng-bind-html becomes [innerHTML].

これで試すことができます。

8
nada

私は次の方法でそれを行うことができました：

<td bind-inner-html="my_data"></td>
0
peter.svintsitskiy