将 HTML 元素添加到 Angular 组件中

Question

如何在运行时将 Angular 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`;