Question

我正在动态生成组件，并将它们作为子代在创建时附加到元素上。但是，每次执行此操作时，该元素中的所有内容都会被删除。

例如：

public fn(event) {
    // Create component factory
    const factory = this.componentFactoryResolver.resolveComponentFactory(NodeComponent);
    // Create component, attach to target
    const ref = factory.create(this.injector, [], event.target);
    // Register for change detection
    this.app.attachView(ref.hostView);
  }

更新前：

<div class="parent">
  Network: 
  <app-node>child1</app-node>
</div>

更新后：

<div class="parent">
  <div>child2</div>
</div>

请注意，更新后，“网络：”和应用程序节点均丢失。此外，生成的NodeComponent没有其app-node标签，而只有HTML内容。

关于如何停止这种行为的任何建议？我正在使用Angular版本7.39。

Answer 1

我让它可以与渲染器一起使用，但是仍然对是否可以使用factory.create（）感到好奇。

解决方案：

public fn(event) {
    // Create component factory
    const factory = this.componentFactoryResolver.resolveComponentFactory(NodeComponent);
    // Create component
    const ref = this.vcRef.createComponent(factory)
    // Attach to target
    this.renderer.appendChild(
      event.target,
      ref.location.nativeElement
    );
}

创建组件作为元素的子元素而不覆盖其他元素的子元素？

1 个答案: