如何从 Angular 组件中的变量显示 HTMLElement？

Question

我将动态生成的HTMLElement存储在组件 class 的变量中。 我想展示它，但我不知道这怎么可能。 我试过这样：

在组件 class 内部：

elem: HTMLElement;

在模板中：

<ng-container *ngTemplateOutlet="elem"></ng-container>

我收到此错误：

TypeError: templateRef.createEmbeddedView is not a function

Answer 1

如果您有一个裸HTMLElement ，那么您无能为力。 NgTemplateOutlet需要一个TemplateRef ，而不是一个普通的HTMLElement object。

要将 HTML 元素插入 DOM，只需使用适当的 DOM 方法即可。 您将使用哪一个完全取决于您要使用它的地方。

例如，你可以做

const wrapper = document.querySelector('div.wrapper')
wrapper.append(el) // pass in your element

您还可以通过在模板中添加 Angular 引用来以更 Angular 的方式获取对包装器的引用，方法是在您想要 select 的元素上，

<div class="wrapper" #wrapper></div>

并在您希望 Angular 将ElementRef分配给的属性上使用ViewChild装饰器。

@ViewChild('wrapper', { static: true, read: ElementRef })
public wrapperElRef: ElementRef<HTMLDivElement>

一旦视图被初始化（当发生这种情况时你会通过ngAfterViewInit钩子得到通知），你可以通过访问 `.nativeElement 来获取 HTML 元素：

this.wrapperElRef.nativeElement //: HTMLDivElement

你现在可以做

this.wrapperElRef.nativeElement.append(elem)

---

也就是说，除非您知道自己在做什么（通常包装现有库或与您还不能完全重构的现有大型系统集成）

Answer 2

大多数情况下，这取决于您如何创建 html。 我建议在注释中指定您在哪里接收包含HTMLElement的变量，以便我可以为您提供最有效的方法。

但通常 - 尝试在父元素中使用innerHTML绑定。

Typescript：

public elem: HTMLElement;

public getElement(): string {
   return this.elem.innerHTML;
}

HTML：

<div innerHTML="getElement()"></div>