javascript - 动态组件列表上带有 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 使用依赖注入(inject)来确定它是否在 CdkDropList 中，当模板在不同的组件中时，这不起作用。对于像这样的更高级的案例，您可以使用 DragDrop 服务自行附加拖放功能。

引用https://github.com/angular/material2/issues/15553

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

希望这对其他人有帮助。