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`;

将HTML元素添加到Angular组件中

1 个答案: