问题描述
你想做什么？
我尝试将动态插入的组件从一个cdkDropList移到cdkDropListGroup内部的另一个组件。
以下是HTML的摘录：
<div class="container-fluid mt-3">
<div class="row" cdkDropListGroup>
<div class="col-4 border min-vh-100" #dropList0Ref
cdkDropList
[cdkDropListData]="columns[0]"
(cdkDropListDropped)="onDrop($event)">
<ng-container #componentContainer0></ng-container>
</div>
<div class="col-4 border min-vh-100" #dropList1Ref
cdkDropList
[cdkDropListData]="columns[1]"
(cdkDropListDropped)="onDrop($event)">
<ng-container #componentContainer1></ng-container>
</div>
<div class="col-4 border min-vh-100" #dropList2Ref
cdkDropList
[cdkDropListConnectedTo]="['dropList0Ref','dropList1Ref']"
[cdkDropListData]="columns[2]"
(cdkDropListDropped)="onDrop($event)">
<ng-container #componentContainer2></ng-container>
</div>
</div>
</div>
component.ts
...
columns: any[] = [ [],[],[] ];
components0: ComponentRef<any>[] = [];
components1: ComponentRef<any>[] = [];
components2: ComponentRef<any>[] = [];
@ViewChild('componentContainer0',{ static: true,read: ViewContainerRef })
componentContainer0: ViewContainerRef;
@ViewChild('componentContainer1',read: ViewContainerRef })
componentContainer1: ViewContainerRef;
@ViewChild('componentContainer2',read: ViewContainerRef })
componentContainer2: ViewContainerRef;
ngAfterViewInit () {
this.add(LogBookComponent,0);
this.add(CustomerListComponent,0);
}
add (component,columnIndex: number) {
let componentFactory;
let cmp: ComponentRef<any>;
let id;
switch (columnIndex) {
case 0:
componentFactory = this.resolver.resolveComponentFactory(component);
cmp = this.componentContainer0.createComponent(componentFactory);
this.components0.push(cmp);
id = cmp.componentType.name;
this.columns[ 0 ].push({ id,title: `Gadget ${ id }` });
cmp.changeDetectorRef.detectChanges();
break;
case 1:
componentFactory = this.resolver.resolveComponentFactory(component);
cmp = this.componentContainer1.createComponent(componentFactory);
id = cmp.componentType.name;
this.components1.push(cmp);
this.columns[ 1 ].push({ id,title: `Gadget ${ id }` });
cmp.changeDetectorRef.detectChanges();
break;
case 2:
componentFactory = this.resolver.resolveComponentFactory(component);
cmp = this.componentContainer2.createComponent(componentFactory);
id = cmp.componentType.name;
this.components2.push(cmp);
this.columns[ 2 ].push({ id,title: `Gadget ${ id }` });
cmp.changeDetectorRef.detectChanges();
break;
default:
throw new Error('only three columns are supported');
}
}
onDrop (event: CdkDragDrop<{}[]>) {
console.log(``);
console.log(``);
console.log(``);
console.log('event',event);
console.log('this.columns',this.columns);
const prevIoUsContainerId = this.getIdOf(event.prevIoUsContainer.id);
const currentContainerId = this.getIdOf(event.container.id);
console.log('prevIoUsContainerId',prevIoUsContainerId);
console.log('currentContainerId',currentContainerId);
if (event.prevIoUsContainer == event.container) {
console.log(`moving inside ${ event.prevIoUsIndex } -> ${ event.currentIndex }`);
switch (currentContainerId) {
case 0:
this.componentContainer0.move(this.components0[ event.prevIoUsIndex ].hostView,event.currentIndex);
moveItemInArray(this.components0,event.prevIoUsIndex,event.currentIndex);
break;
case 1:
this.componentContainer1.move(this.components1[ event.prevIoUsIndex ].hostView,event.currentIndex);
moveItemInArray(this.components1,event.currentIndex);
break;
case 2:
this.componentContainer2.move(this.components2[ event.prevIoUsIndex ].hostView,event.currentIndex);
moveItemInArray(this.components2,event.currentIndex);
break;
}
}
else {
console.log(`transferring ${ prevIoUsContainerId } -> ${ currentContainerId } (${ event.prevIoUsIndex } -> ${ event.currentIndex })`);
let prevIoUsComponents;
let currentComponents;
transferArrayItem(prevIoUsComponents,currentComponents,event.currentIndex);
transferArrayItem(this.columns[ prevIoUsContainerId ],this.columns[ currentContainerId ],event.currentIndex);
switch (currentContainerId) {
case 0:
currentComponents = this.components0;
switch (prevIoUsContainerId) {
case 0:
// not possible is an move in array
console.log(`not possible is an move in array`);
break;
case 1:
prevIoUsComponents = this.components1;
this.componentContainer0.move(this.components1[ event.prevIoUsIndex ].hostView,event.currentIndex);
break;
case 2:
prevIoUsComponents = this.components2;
this.componentContainer0.move(this.components2[ event.prevIoUsIndex ].hostView,event.currentIndex);
break;
}
break;
case 1:
currentComponents = this.components1;
switch (prevIoUsContainerId) {
case 0:
prevIoUsComponents = this.components0;
this.componentContainer1.move(this.components0[ event.prevIoUsIndex ].hostView,event.currentIndex);
break;
case 1:
// not possible is an move in array
console.log(`not possible is an move in array`);
break;
case 2:
prevIoUsComponents = this.components2;
this.componentContainer1.move(this.components2[ event.prevIoUsIndex ].hostView,event.currentIndex);
break;
}
break;
case 2:
currentComponents = this.components2;
switch (prevIoUsContainerId) {
case 0:
prevIoUsComponents = this.components0;
this.componentContainer2.move(this.components0[ event.prevIoUsIndex ].hostView,event.currentIndex);
break;
case 1:
prevIoUsComponents = this.components1;
this.componentContainer2.move(this.components1[ event.prevIoUsIndex ].hostView,event.currentIndex);
break;
case 2:
// not possible is an move in array
console.log(`not possible is an move in array`);
break;
}
break;
}
}
}
...
我可以将两个组件移动到一个cdkDropList中。我也可以从另一个移到另一个cdkDropList。但是，如果我尝试将其移回第一个cdkDropList或将其移至新的cdkDropList内，则会发生错误。如果我调试$event，则event.prevIoUsContainer.id仍然是0。所以没有更新。但是我不知道。
我知道有一些方法可以缩短它，但是在开始重构之前，我需要进行有效的拖放。
StackBlitz：https://stackblitz.com/edit/angular-ivy-iuwvmb?file=src%2Fapp%2Fapp.component.ts
在Stackblitz中复制的步骤：
- 将 Hello组件1 移至第二列
- 尝试将 Hello组件1 移回第一列
- 在控制台中查看调试信息和错误
- 角度：9.1.9
- CDK /材料：9.2.4
- 浏览器：Chrome
- 操作系统（例如Windows，macOS，Ubuntu）：macOS
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）