从 jQuery 中删除动态组件会弄乱 ViewContainerRef 容器

Question

我有一个 angular 2+ 应用程序，我在其中创建了一堆动态组件，就像这样 -

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

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

我正在使用 jsPlumb（jQuery 版本）将这些创建的组件绘制到 canvas。一旦这些元素成为 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的父节点为空。我怀疑使用 jQuery remove 删除组件会以某种方式弄乱容器并且不会将新组件正确添加到父级。请注意，我必须执行 jsPlumb.remove 因为还有其他几个相关事件将由 jsPlumb 在内部触发，这些事件必须在组件从中移除时全部执行（就像连接到它的所有边也应该被移除，等等） .)

有谁知道这里发生了什么以及如何解决？感谢任何帮助。

Answer 1

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

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

...

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

从 jQuery 中删除动态组件会弄乱 ViewContainerRef 容器

Removing dynamic component from jQuery messes up the ViewContainerRef container

javascript

jquery

jsplumb

angular