动态组件列表上带有 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

希望这对其他人有所帮助。