组件模块中的 Angular Material 拖放

Question

我正在尝试在自定义组件模块后面使用 Angular 的 CdkDropList 和 CdkDrag 并进行排序。我发布了 stackblitz example here.有两个例子。第一个示例使用我的自定义模块。第二个演示了相同的代码，但没有自定义模块。这两个示例都不使用数组来构建 CdkDrag 区域，如 Angular Material Docs Here 中所示.我想知道如何让“示例 1”工作以支持使用我的自定义组件进行拖放重新排序并且不使用数组来构建拖放列表。下面是基本的组件设置。请引用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