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

【问题标题】：Removing dynamic component from jQuery messes up the ViewContainerRef container从 jQuery 中删除动态组件会弄乱 ViewContainerRef 容器
【发布时间】：2018-05-23 20:26:33
【问题描述】：

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

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

【问题讨论】：

我想问题是您使用 Angular 创建您的（组件）视图，该视图已插入并应该由 Angular 管理，但意外地被 Angular 不知道的其他 JavaScript 库删除。您是否尝试过使用 Angular 方式 detach/remove 您的视图？像this.cardContainer.detach() 这样的东西来删除你的动态组件然后用jsPlumb做你需要的任何事情？如果您可以分享（html/ts）动态组件的实现方式/位置，将会很有帮助。
感谢您的回复。我试过删除（）。这导致了冲突，因为无论哪个删除发生在第二个，都会抱怨该元素已被删除。但是分离解决了这个问题。我做了类似 this.cardContainer.detach(this.cardContainer.indexOf(card.componentRef));请将您的回复作为答案发布，我会将问题标记为已回答。
谢谢。刚刚添加了最小的解决方案。

标签： javascript jquery angular jsplumb

【解决方案1】：

正如上面评论中提到的。以 Angular 方式操作由 Angular 创建的 DOM 元素的一种方法是使用 ViewContainerRef 类的 detach() 方法。像这样：

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

...

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

【讨论】：