使用Angular2向DOM中插入来自服务器的HTML（在Angular2中进行通用DOM操作）

Question

我希望将从服务器检索到的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);
    }
}

那么现在我的模板中大概会有这样的内容：

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

这样做是有效的，但我不确定这是否是正确的方法，而且setTimeout似乎是一个奇怪的解决方法。如果没有setTimeout，this.elem.nativeElement似乎并不实际指向DOM元素，而是指向某种临时元素。

是否有更“正确”的angular2方法来简单地插入HTML到DOM中？为什么需要将DOM操作包装在setTimeout中？

- imagio

Answer 1

阅读这篇2014年11月份的文章：http://www.beyondjava.net/blog/angularjs-2-0-sneak-preview-data-binding/

ng-bind-html变成了[innerHTML]。

你可以试试看。

- nada

---

虽然这对于像<b>Hello!</b>这样的简单HTML标签有效，但它不适用于您自己创建的Angular指令。在Angular 1.x中，您使用了$sce.trustAsHTML()与一个自定义指令相结合，该指令调用$compile来编译您HTML中的Angular指令。我们需要知道在Angular 2中的等效方法。 - Vern Jensen

我认为现在是[innerHTML]。 - R891

@VernJensen，我在使用自定义指令时也遇到了同样的问题，你解决了吗？ - Omar Hassan

不，我意识到为了我的目的，我可以使用ngFor循环来迭代一系列自定义对象，这些对象指定了我想要的HTML元素，并在循环内部使用一系列ngIf语句--每个HTML指令一个。 （例如，一个用于<select>控件，另一个*ngIf用于<textarea>，另一个用于我创建的自定义ng2指令等等）。这证明非常有效。如果我的做法不清楚，请告诉我，我可以发布带有源代码的答案。 - Vern Jensen

Answer 2

我是通过以下方式完成的：

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

- peter.svintsitskiy

---

我认为现在它是[innerHTML]。 - R891