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

我正在尝试使用 Angular Material 7 发布的拖放功能。并使用 ng-template 动态创建组件。

<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 https://stackoverflow.com/a/54158293/4481952

有没有办法让 drop 功能发挥作用？

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

问题是你不能将 cdkDrag 和 cdkDropList 与组件一起使用，我们必须使用最近随 Angular Material 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.

Refer https://github.com/angular/material2/issues/15553 https://github.com/angular/material2/issues/15553

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

希望这对其他人有帮助。