У меня есть угловое приложение 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 каким-то образом портит контейнер и не добавляет новые компоненты должным образом к родительскому.Обратите внимание, я ДОЛЖЕН сделать jsPlumb.remove, так как есть несколько других связанных событий, которые будут запускаться внутренне с помощью jsPlumb, которые должны выполняться при удалении компонента из него (как и все связанные с ним ребра, также должны быть удалены и т. Д.)
Кто-нибудь знает, что здесь происходит и как это можно исправить?Любая помощь приветствуется.