Question

我在用户点击按钮时执行以下方法。

@ViewChild("privs") privs: ElementRef;
addPrivs() {
  this.privs.nativeElement
    .insertAdjacentHTML('beforeend', '<generic1>yey!</generic1>');
}

我的标记看起来像这样。

<generic1>woosh</generic1>
<div #privs></div>

名为 generic1 的子组件是这样声明的，当然也存在于模块的 imports 中。

import { Component } from "@angular/core";
@Component({
  selector: "generic1",
  template: "<div>mamba...</div>"
})
export class Generic1 { }

我得到的行为是标记中统计创建的一个显示为应该。动态附加的不是。根据我调查的DOM，添加了一个标记 generic1 ，但它没有被Angular呈现（我看到文本 yey！和标签但不是演绎组件）。

我错过了什么？

我已经搜索了一些示例，但没有看到我的设置有什么特别的错误。必须超出我的范围......

Answer 1

您实际上并未创建动态组件。您正在插入未由Angular呈现的其他HTML。将Html和文本插入到这样的模板中时会对其进行清理，因此您将无法获得渲染组件。

This answer对设置动态组件有非常详细的解释。但是，它不是您需要的复制和粘贴解决方案。 documentation on Angular.io有一个很好的动态组件加载器示例。基本上，您需要ComponentFactoryResolver来解析和构建Angular组件。在Angular.io文档的示例中，真正的魔法发生在这个函数中：

loadComponent() {
    this.currentAddIndex = (this.currentAddIndex + 1) % this.ads.length;
    let adItem = this.ads[this.currentAddIndex];
    let componentFactory = this._componentFactoryResolver.resolveComponentFactory(adItem.component);
    let viewContainerRef = this.adHost.viewContainerRef;
    viewContainerRef.clear();
    let componentRef = viewContainerRef.createComponent(componentFactory);
    (<AdComponent>componentRef.instance).data = adItem.data;
  }

它从this.ads中的存储组件列表中检索组件，使用componentFactoryResolver来解析和构建组件。它检索viewContainerRef并在其上创建组件。

希望这有助于指明你正确的方向。

动态添加的Angular2组件不会被渲染但静态添加的

1 个答案: