angular - 动态创建 CdkDrag 项目时无法丢弃

Question

我对 cdkDrag 有疑问。我正在尝试动态创建 cdkDrag 组件。我需要在两个 CdkDropLists 之间拖动组件。我不知道出了什么问题，项目从一个列表拖到另一个，但没有放入新的。这是代码。

<button md-raised-button (click)="add()">Add panel</button>
<div class="drag-drop-container">

  <div class="example-container">
    <div class="example-list" cdkDropList #todoList="cdkDropList" (cdkDropListDropped)="drop($event)"
      [cdkDropListConnectedTo]="doneList">
      <ng-container #container1>
      </ng-container>
    </div>
  </div>

  <div class="example-container">
    <div class="example-list" cdkDropList #doneList="cdkDropList" (cdkDropListDropped)="drop($event)"
      [cdkDropListConnectedTo]="todoList">
      <ng-container #container2>
      </ng-container>
    </div>
  </div>

</div>

动态 cdkDrag 组件包含在 ng-container 指令中

import {
  Component,
  ViewChild,
  ElementRef,
  ViewContainerRef,
  ViewEncapsulation,
  ComponentFactoryResolver,
  OnInit,
  Injector
} from '@angular/core';

import {
  DragDrop,
  CdkDragDrop,
  CdkDropList,
  DragRef,
  moveItemInArray,
  transferArrayItem
} from '@angular/cdk/drag-drop';

@Component({
  selector: 'hello',
  template: `
          <div #divDrag>
          <button mat-raised-button>A</button>
        </div>
  `,
  styles: [],
  encapsulation: ViewEncapsulation.None,
})
export class HelloComponent {
  @ViewChild('divDrag', { static: true }) div: ElementRef;

  dragEnable(dragDrop) {
    // this.div isn't visible inside a ng-template this doesn't run
    return dragDrop.createDrag(this.div);
  }
}


let counter = 0;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  @ViewChild("container1", { read: ViewContainerRef, static: true }) container1: ViewContainerRef;
  @ViewChild("container2", { read: ViewContainerRef, static: true }) container2: ViewContainerRef;
  @ViewChild("todoList", { static: true }) bindTodo: CdkDropList;
  @ViewChild("doneList", { static: true }) bindDone: CdkDropList;
  constructor(private resolver: ComponentFactoryResolver, private dragDrop: DragDrop, private injector: Injector) { }
  todoDragRef: DragRef[] = new Array<DragRef>();
  doneDragRef: DragRef[] = new Array<DragRef>();

  ngOnInit() {
    /*this.bindTodo.data = new Array<string>();
    this.bindDone.data = new Array<string>();*/
    this.bindTodo.data = this.sourceK;
    this.bindDone.data = this.destK;
  }
  sourceK = ['A'];
  destK = [];

  add() {
    //Dynamic componenent creation
    let componentFactory = this.resolver.resolveComponentFactory(HelloComponent);
    let componentRef = this.container1.createComponent(componentFactory);
    this.bindTodo.data.push(this.sourceK[counter]);

    componentRef.changeDetectorRef.detectChanges();
    let dragRefT = componentRef.instance.dragEnable(this.dragDrop);
    this.todoDragRef.push(componentRef.instance.dragEnable(this.dragDrop));
    this.bindTodo._dropListRef.withItems(this.todoDragRef);
  }

  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
      /*if (event.previousContainer == this.bindTodo) {
        this.doneDragRef.splice(event.currentIndex, 0, this.todoDragRef.splice(event.previousIndex, 1)[0]);
      }
      this.bindTodo._dropListRef.withItems(this.todoDragRef);
      this.bindDone._dropListRef.withItems(this.doneDragRef);*/
    }
    /*this.renderContainer(this.bindTodo, this.container1);
    this.renderContainer(this.bindDone, this.container2);*/
  }
}

.drag-drop-container {
  width: calc(100% - 10px);
  height: 200px;
  margin-left: 5px;
  margin-top: 5px;
  border: dotted #ccc 2px;
}

.example-container {
  width: 400px;
  max-width: 100%;
  margin: 0 25px 25px 0;
  display: inline-block;
  vertical-align: top;
}

.example-list {
  border: solid 1px #ccc;
  min-height: 60px;
  background: white;
  border-radius: 4px;
  /*overflow: hidden;*/
  display: block;
}

标签： angularangular-materialangular-cdk