Question

这是函数，我用来动态添加带有其他HTML元素的组件。我正在尝试在哪个元素中添加Angular自定义指令和属性。而且它不起作用。 :(

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 myDirective [myAttr]="myVar" myAttr2="myVar2">${this.demoText}</h1>`;
    domElem.appendChild(newcontent);
    document.getElementById("testid").appendChild(domElem);
}

这里 myDirective是自定义角度指令。 myAttr，myAttr2是自定义角度指令的属性。 myVar，myVar2可以是相同组件的静态文本或变量。

Answer 1

在Angular中更改innerHTML不是一个好主意。您必须创建一个指令，在其中引入Renderer2实例以呈现所需的组件。请阅读以下文章=> https://alligator.io/angular/using-renderer2/ 问候迈克尔

将具有自定义angular指令和属性的HTML元素添加到Angular Component中

1 个答案: