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

我有一个angular 2+应用程序，我在其中创建了一系列动态组件，如：

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

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

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

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

现在，在用户（单击）事件中，我正在删除用户单击的元素，如下所示-

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

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

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将在内部触发几个其他相关事件，这些事件都必须在从组件中移除组件时执行（例如，连接到组件的所有边也应移除，等等）

---

有人知道这里发生了什么，以及如何解决吗？感谢您的帮助。

如上述评论所述。以Angular方式操作Angular创建的DOM元素的一种方法是使用ViewContainerRef类的

detach（）

方法。大概是这样的：

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

...

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

---

我想问题是您使用Angular创建（组件）视图，该视图被插入并应该由Angular管理，但意外地被Angular不知道的其他JavaScript库删除。您是否尝试过使用角度方式分离/删除视图？类似于

this.cardContainer.detach（）

的方法删除您的动态组件，然后使用jsPlumb执行您需要的任何操作？如果你能分享（html/ts）你的动态组件是如何实现的/在哪里实现的，那会很有帮助。谢谢你的回复。我尝试删除（）。这导致了一个冲突，因为第二次删除时，会抱怨元素已经被删除。但这解决了问题。我做了类似这样的操作。cardContainer.detach（this.cardContainer.indexOf（card.componentRef））；请将您的回复作为答案发布，我将标记所回答的问题。谢谢。只是增加了最小解。