在動態組件列表上帶有ng-template的cdkDropList不起作用

Question

我正在嘗試使用Angular Material 7發布的拖放功能，並使用ng-tempalte動態創建組件。

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

並在組件上添加了cdkDrag。

我在父組件處使用createComponent來繼續創建組件。 viewContainerRef.createComponent

但是dragdrop功能不起作用，因為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

有沒有辦法使dropfunction功能起作用？

演示代碼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

希望這可以幫助其他人。