在动态组件列表上带有ng-template的cdkDropList不起作用 [英] cdkDropList with ng-template on dynamic component list do'snt work
问题描述
我正在尝试使用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
问题是您不能将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
希望这可以帮助其他人.
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不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!