Inserting HTML from server into DOM with angular2 (general DOM manipulation in Angular2)
本问题已经有最佳答案,请猛点这里访问。
我想将从服务器检索到的一些HTML插入到Angular2中的一个DOM元素中。我似乎找不出最好/正确的方法来做这件事。
我不能将我的数据放入模板,因为Angular2将自动退出HTML。
我试图编写一个html unsafe指令,该指令只将一个值直接分配给元素的innerhtml:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | /// <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); } } |
所以现在在我的模板中我有一些
1 | <td [html-unsafe]="my_data"></td> |
号
这是可行的,但我不确定这是正确的方法,而且设置时间似乎是一个奇怪的解决方法。如果不使用setTimeout,那么
有没有更"正确"的Angular2方法可以简单地将HTML插入到DOM中?为什么我需要在设置时间内包装DOM操作?
从2014年11月开始,阅读本文http://www.beyondjava.net/blog/angularjs-2-0-sleak-preview-data-binding/。
你可以试试这个。
我可以用以下方法做到:
1 | <td bind-inner-html="my_data"></td> |