將HTML元素添加到Angular組件中

Question

如何在運行時將有角度的html元素添加到組件中。

假設html元素是具有角度表達式的H1標簽。

 <h1>{{testHeading}}</h1> 

我想將此標簽插入組件。 具有持久性的動態角度屬性。 這里的“ testHeading”是一個角度變量。

我正在嘗試使用以下方法添加元素：

addComponent(component:any){
    let componentRef = this.componentFactoryResolver
    .resolveComponentFactory(component)
    .create(this.injector);

    this.appRef.attachView(componentRef.hostView);

    const domElem = (componentRef.hostView as EmbeddedViewRef<any>)
    .rootNodes[0] as HTMLElement;

    var newcontent = document.createElement('div');
    newcontent.innerHTML = `<h1>${this.demoText}</h1>`;
    domElem.appendChild(newcontent);

    document.getElementById("testid").appendChild(domElem);
}

Answer 1

在模板中創建一個容器

<div #container></div>

通過創建容器引用

ViewChild('container') container: ElementRef;

在查看初始化之后，您可以通過以下方式訪問容器元素：

container.nativeElement.innerHTML = `<h1>${yourString}</h1`;