组件模块中的角度材料拖放

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容器是不起作用的原因，因为它们是一个边界。

下面有关此问题的更多信息...我们提供了一个stackblitz的解决方法供您查看...此问题仍然存在，因此允许超出范围绑定可能仍在进行中。

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

---

CdkDrag接受对CdkDropList的引用，您可以通过引用。

dropContainer: CdkDropList可拖动容器是可拖动容器的一部分。

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