如何從 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>