Angular Material 在组件模块内拖放

Question

我正在尝试在自定义组件模块后面使用 Angular 的 CdkDropList 和 CdkDrag 并进行排序。我已经发布了完整代码示例的 stackblitz example here. with two examples. The first example uses my custom module. The second demonstrates the same code but without a custom module. Both examples to not use arrays to build the CdkDrag areas as shown in the Angular Material Docs Here. I would like to know how to get 'Example 1' working to support drag drop reordering using my custom components and without arrays to build the drag list. Below is the basic component setups. Please refer to the stackblitz example。

组件：

@Component({
  selector: 'dragPanel',
  styleUrls: ['drag.component.scss'], // reference not important
  template: `
    <div cdkDrag class="example-box">
         <b>{{ title }}</b>
         <ng-content></ng-content>
    </div>
  `,
})
export class DragComponent {
  @Input() title;
}

@Component({
  selector: 'dragListPanel',
  styleUrls: ['drag.component.scss'], // reference not important
  template: `
  <div #cdkList cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
      <ng-content></ng-content>
  </div> 
  `,
})
export class DragListComponent {
  @ContentChildren(DragComponent) dragPanels: QueryList<DragComponent>
  // @ViewChild(CdkDropList) cdklist: CdkDropList;

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
  }

  ngAfterContentInit() {
    // Debugging
    this.dragPanels.forEach(panelInstance => {
      console.log(panelInstance);
    })
  }
}

模块：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DragDropModule } from '@angular/cdk/drag-drop'; 

// Custom components
import { DragComponent, DragListComponent } from './drag.component';
const components = [
  DragComponent,
  DragListComponent,
];

@NgModule({
  imports: [CommonModule, DragDropModule],
  declarations: components,
  exports: components,
  schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
})
export class UiDragpanelModule {}

在您的 app.component.html 页面等中使用上述示例

   <dragListPanel>
     <dragPanel title="One">data 1</dragPanel>
     <dragPanel title="Two">data 2</dragPanel>
     <dragPanel title="Three">data 3</dragPanel>
   </dragListPanel>

Answer 1

这似乎是 CdkDropListContainer 不是拖动元素的直接父项的问题。如果我错了，有人可以纠正我，但我相信 ng-content 容器是这不起作用的原因，因为它们是边界。

More information about this issue below... there are provided workarounds with a stackblitz for your review... this issue is still open, so allowing out of scope binding may still be in the works.

https://github.com/angular/material2/issues/14099

CdkDrag 接受对 CdkDropList 的引用，您可以将引用传递给

dropContainer: CdkDropList Droppable container that the draggable is a part of.

https://material.angular.io/cdk/drag-drop/api#CdkDrag

Angular Material 在组件模块内拖放

Angular Material Drag Drop within Component Module

drag-and-drop

angular-module

angular-material2

angular-components

angular