gpt4 book ai didi

javascript - 使用 angular2 将 HTML 从服务器插入 DOM(Angular2 中的一般 DOM 操作)

转载 作者:可可西里 更新时间:2023-11-01 02:24:32 24 4
gpt4 key购买 nike

<分区>

我想将从服务器检索到的一些 HTML 插入到 angular2 中的 DOM 元素中。我似乎无法找出执行此操作的最佳/正确方法。

我不能只将 {{my_data}} 放入模板中,因为 Angular 2 会自动转义 HTML。

我试图编写一个 html-unsafe 指令,它只是直接为元素的 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 中?

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com