cdkDropList с ng-шаблоном в динамическом списке компонентов не работает

Question

Я пытаюсь использовать функции перетаскивания, выпущенные с Angular Material 7. И динамически создавая компонент, используя ng-tempalte.

<div cdkDropList (cdkDropListDropped)="dropLocal($event)"> <ng-template #components></ng-template> </div>

и добавляем cdkDrag в компоненты.

Я использую createComponent в родительском компоненте для продолжения создания компонентов.viewContainerRef.createComponent

, но функция перетаскивания не работает, так как cdkDrag must be in a tag nested inside the one with cdkDropList, otherwise the dragged element won't detect the drop zone.

ссылка: https://stackoverflow.com/a/54158293/4481952

Есть ли способ заставить функционировать drop-функциональность?

демонстрационный код https://stackblitz.com/edit/angular-ngtemplate-reorder?file=src%2Fapp%2Fapp.component.html

Answer 1

Проблема в том, что вы не можете использовать cdkDrag и cdkDropList с компонентами, мы должны использовать сервис для того, что недавно выпущено с AngularMaterial 3.5. +

CdkDrag uses dependency injection to find out whether it's inside a CdkDropList which doesn't work when the template is inside a different component. For more advanced cases like this one you can use the DragDrop service to attach the drag&drop functionality yourself.

См. https://github.com/angular/material2/issues/15553

Код Stackblitz для реализации cdkService: https://stackblitz.com/edit/angular-ngtemplate-reorder-7i6uuk?file=src%2Fapp%2Fapp.component.ts

надеюсь, это поможет кому-то еще.