Javascript 使用angular2将HTML从服务器插入DOM（angular2中的通用DOM操作）

我想将从服务器检索到的一些HTML插入angular2中的DOM元素中。我似乎想不出做这件事的最佳/正确方法

我不能仅仅将{{my_data}}放入模板中，因为angular 2将自动转义HTML

我曾尝试编写一个html不安全指令，该指令仅将一个值直接分配给元素的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);
    }
}

//
从'angular2/angular2'导入{Directive}；
从'angular2/core'导入{ElementRef}；
@指示({
选择器：“[html不安全]”，
属性：['htmlUnsafe']
})
导出类HtmlUnsafe{
构造函数（私有元素：ElementRef）{
}
设置htmlUnsafe（值）{
设置超时（（）=>{
this.elem.nativeElement.innerHTML=值；
},0);
}
}

所以现在在我的模板中，我有

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

这是可行的，但我不确定这是正确的方法，setTimeout似乎是一个奇怪的解决方法。如果没有setTimeout，则似乎

this.elem.nativeElement

实际上并不是指DOM元素，而是指某种临时元素

---

是否有一种更“正确”的方式可以简单地将HTML插入DOM？为什么我需要在setTimeout中包装DOM操作？

我可以通过以下方式完成：

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

从2014年11月开始阅读本文

ng bind html变成[innerHTML]。

---

您可以尝试使用它。

而这适用于简单的HTML标记，如Hello！它不适用于您自己创建的角度指令。在Angular 1.x中，您使用$sce.trustAsHTML（）与一个名为$compile的自定义指令组合，以编译HTML中的Angular指令。我们需要知道Angular 2中的等价物。我认为它现在是

[innerHTML]

@VernJensen。我对自定义指令也有同样的问题，你解决了吗？不，我意识到出于我的目的，我可以使用*ngFor循环来迭代一系列自定义对象，这些对象指定了我想要的HTML元素，循环中包含一系列*ngIf语句——我希望能够创建的每个HTML指令对应一个。（例如，一个用于控件，另一个*ngIf用于控件，另一个用于我创建的自定义ng2指令，等等。）这已经证明非常有效。如果我所做的不清楚，请告诉我，我可以用源代码发布一个答案。我想现在是

[innerHTML]

。