在动态组件列表上带有ng-template的cdkDropList不起作用

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

是否有办法使dropfunctionality工作？

演示代码https://stackblitz.com/edit/angular-ngtemplate-reorder?file=src%2Fapp%2Fapp.component.html

Answer 1

问题是您不能将cdkDrag和cdkDropList与componenet一起使用，我们必须使用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

用于实现cdkService的Stackblitz代码： https://stackblitz.com/edit/angular-ngtemplate-reorder-7i6uuk?file=src%2Fapp%2Fapp.component.ts

希望这可以帮助其他人。