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

问题描述

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

<ng-template #components></ng-template>

并在组件处添加了 cdkDrag.

我在父组件上使用 createComponent 来继续创建组件.viewContainerRef.createComponent

但是拖放功能不起作用，因为cdkDrag 必须位于嵌套在带有 cdkDropList 的标签内的标签中，否则被拖动的元素将无法检测到拖放区.

参考:https://stackoverflow.com/a/54158293/4481952

有没有办法让 dropfunctionity 起作用?

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

解决方案

问题是你不能将 cdkDrag 和 cdkDropList 与 componenet 一起使用，我们必须使用最近随 AngularMaterial 3.5 发布的服务.+

CdkDrag 使用依赖注入来确定它是否位于 CdkDropList 中，当模板位于不同的组件中时，该 CdkDropList 不起作用.对于这种更高级的情况，您可以使用 DragDrop 服务自己附加拖放功能.

参考 https://github.com/angular/material2/issues/15553

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

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

I'm trying to use Drag&Drop features released with Angular Material 7. And dynamically creating component using ng-tempalte.

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

and added cdkDrag at components.

I am using createComponent at parent component to keep on create components.viewContainerRef.createComponent

but dragdrop functionality is not functional since cdkDrag must be in a tag nested inside the one with cdkDropList, otherwise the dragged element won't detect the drop zone.

reference :https://stackoverflow.com/a/54158293/4481952

Is there a way around to make dropfunctionality work?

demo code https://stackblitz.com/edit/angular-ngtemplate-reorder?file=src%2Fapp%2Fapp.component.html

解决方案

The problem is you can't use cdkDrag and cdkDropList with componenet , we have to use service for that which is recently released with 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.

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

Stackblitz code for implementation of cdkService:https://stackblitz.com/edit/angular-ngtemplate-reorder-7i6uuk?file=src%2Fapp%2Fapp.component.ts

hope this helps out someone else.

这篇关于动态组件列表上带有 ng-template 的 cdkDropList 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！