时间戳

首页 > 解决方案 > 如何从 Angular 组件中的变量显示 HTMLElement？

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

问题描述

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

在组件类内部：

elem: HTMLElement;

在模板中：

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

我收到此错误：

TypeError: templateRef.createEmbeddedView is not a function

标签： javascriptangulartypescript

解决方案

如果你有一个裸机HTMLElement，那么 Angular-y 就无能为力了。NgTemplateOutlet期望 a TemplateRef，而不是 vanilaHTMLElement对象。

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

例如，你可以做

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

您还可以通过在要选择的元素的模板中添加 Angular 引用，以更 Angular 的方式获取对包装器的引用，

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

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

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

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

this.wrapperElRef.nativeElement //: HTMLDivElement

你现在可以做

this.wrapperElRef.nativeElement.append(elem)

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

推荐阅读