Question

我有一个有角度的2+应用程序，我正在创建一堆动态组件，如此 -

@ViewChild("containerNode", { read: ViewContainerRef }) cardContainer;

const factory = this.ComponentFactoryResolver.resolveComponentFactory(CardComponent);
const ref = this.cardContainer.createComponent(factory);

我正在使用jsPlumb（jQuery版本），我将这些创建的组件绘制到画布上。一旦这些元素成为jsPlumb实例的一部分，jsPlumb就会提供删除元素，添加端点等的选项。

现在，在用户（点击）事件中，我删除了用户点击的元素，就像这样 -

this.jsPlumbInstance.remove(ref.location.nativeElement);

在内部我假设这只是一个jQuery删除。我面临的问题是，在使用上面的代码删除此元素后，我无法使用ViewContainerRef添加任何新组件。执行此行后，我执行此操作

const factory = this.ComponentFactoryResolver.resolveComponentFactory(CardComponent);
const ref = this.cardContainer.createComponent(factory);

ref.location.nativeElement的父节点为null。我怀疑使用jQuery remove删除组件会以某种方式弄乱容器，并且不会将新组件正确地添加到父组件中。注意，我必须执行jsPlumb.remove，因为jsPlumb将在内部触发其他几个相关事件，这些事件必须在从组件中移除组件时执行（例如，连接到它的所有边也应该被删除，等等）

有谁知道这里发生了什么以及如何解决？任何帮助表示赞赏。

Answer 1

如上述评论所述。以Angular方式操纵Angular创建的DOM元素的一种方法是使用ViewContainerRef类的detach()方法。像这样：

@ViewChild("containerNode", { read: ViewContainerRef }) cardContainer: ViewContainerRef;

...

// To remove/detach component in Angular way
this.cardContainer.detach();

从jQuery中删除动态组件会混淆ViewContainerRef容器

1 个答案: