使用angular2将HTML从服务器插入DOM(angular2中的通用DOM操作)
Inserting HTML from server into DOM with angular2 (general DOM manipulation in Angular2)
我想将从服务器检索到的一些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中?
阅读本文http://www.beyondjava.net/blog/angularjs-2-0-sneak-preview-data-binding/自2014年11月起。
ng-bind-html becomes [innerHTML].
你可以试试这个。
我可以通过以下方式完成:
<td bind-inner-html="my_data"></td>
相关文章:
- 如何在Angular2中使用jQuery插件
- 不能从angular2中的子组件指定父组件中的数组
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- 在不使用JQuery的情况下隐藏DOM中的选定元素
- 如何在DOM元素上按类型构建此函数
- Windows形成web浏览器控件和Javascript更改的DOM
- Datatables:通过DOM数据源中的名称引用列
- 在DOM中查找一个模式并替换它's的内容使用jquery
- angular2:使用*ngIf构建svg图标不会给DOM添加任何内容
- Angular2指令:如何检测DOM变化
- 使用 Ionic2 和 Angular2 Typescript 将侧边菜单加载到 DOM 中
- 如何只在存在DOM元素的情况下加载Angular2应用
- 找到一个DOM元素对应的angular2组件
- 在angular2中选择多个dom元素
- Angular2:如何用Javascript从index.html中访问DOM-Element(在Component内部
- 在Angular2中,在Component之外的特定dom中添加一个类
- 如何在Angular2中获得(DOM)元素的宽度
- 使用angular2将HTML从服务器插入DOM(angular2中的通用DOM操作)
- Angular2等待DOM元素加载