динамическое перетаскивание и соединение созданных узлов в angular6 с помощью jsplumb

Question

Я пытаюсь дать пользователю возможность создавать, перетаскивать и соединять несколько узлов, но я до сих пор не понимаю, как выполнять рендеринг под углом, этот или жизненный цикл компонентов и прочего, поэтому даже после большого количества исследований, Я все еще не могу понять, как решить проблемы, перечисленные ниже.

По сути, я пытаюсь достичь того, чего уже достиг, с помощью простого HTML page , но на этот раз здесь с Angular и angular не облегчает мне задачу. Сначала я боролся с перетаскиванием новых div-ов, мне удалось это сделать, но теперь, похоже, конечные точки не могут подключаться, не знаю, почему или как это исправить. И даже после просмотра документа я до сих пор не понимаю, как работают такие вещи в коде, как AfterViewInit, ComponentFactoryResolver, parentInjector, resolveComponentFactory, они действительно решили проблему перетаскивания, но я не знаю почему или как они это исправили.

Так что любая помощь или объяснение были бы очень важны.

Answer 1

Дело в том, что вы добавляете конечные точки и делаете узлы перетаскиваемыми, используя новый экземпляр jsplumb, созданный в момент создания этого компонента узла, что в конечном итоге приведет к множеству экземпляров jsplumb для каждого узла, и это то, что кажется проблемой, потому чтоочевидно, чтобы соединить эти узлы, они должны быть инициализированы с одним и тем же экземпляром jsplumb: поэтому попробуйте создать только один экземпляр (или использовать экземпляр jsplumb по умолчанию) в родительском компоненте (тот, который содержит все узлы), а затем передать его с привязкой свойства (@ввод ...) во вновь созданные узлы, которые можно использовать для перетаскивания и т. д.