Перетаскивание углового материала в компонентный модуль

Question

Я пытаюсь использовать Angular's CdkDropList и CdkDrag за модулем пользовательского компонента и работаю над сортировкой.Я разместил здесь пример stackblitz. с двумя примерами.Первый пример использует мой пользовательский модуль.Второй демонстрирует тот же код, но без пользовательского модуля.Оба примера не используют массивы для построения областей CdkDrag, как показано в документах Angular Material Here .Я хотел бы знать, как заставить 'Пример 1' работать для поддержки переупорядочения с помощью перетаскивания с использованием моих пользовательских компонентов и без массивов для создания списка перетаскивания.Ниже приведены основные настройки компонентов.Пожалуйста, обратитесь к примеру stackblitz для полного примера кода.

Компоненты:

@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, поскольку они являются границей.

Подробнее об этой проблеме ниже ... естьпредоставлены обходные пути со стеком для вашего обзора ... эта проблема по-прежнему открыта, поэтому разрешение привязки за пределами области может все еще быть в работе.

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

---

CdkDrag принимает ссылку на CdkDropList, вы можете передавать ссылку в.

dropContainer: CdkDropList Пропадающий контейнер, частью которого является перетаскиваемый объект.

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