Как использовать Angular 7 cdkDropList между компонентами? - PullRequest
Новая
       27

Как использовать Angular 7 cdkDropList между компонентами?

0 голосов
/ 30 октября 2018

У меня есть список предметов (студентов) в компоненте списка матов в левой части моего экрана (общий список). У меня также есть список компонентов классной комнаты на правой стороне моего экрана. В каждом компоненте классной комнаты есть список студентов.

Я хочу иметь возможность перетаскивать учащихся из общего списка в один из списков учащихся, содержащихся в любом из компонентов класса, используя новый Drag & Drop API углового материала

псевдокод выглядит так: 

<mat-list #studentsList="cdkDropList" cdkDropList [cdkDropListData]="students">
  <mat-list-item cdkDrag *ngFor="let student of studentes">
    {{student.name}}
  </mat-list-item>
</mat-list>

<div class="right-panel>
  <app-class-room *ngFor="let cr of classRooms" [classRoom]="cr"></app-class-room>
</div>

Очевидно, что я не могу использовать ввод [cdkDropListConnectedTo] в общем списке, поскольку у меня нет доступа к списку студентов внутри компонента класса. Как мне поступить?

Ответы [ 2 ]

0 голосов
/ 05 декабря 2018

Вы также можете использовать CdkDropListGroup в качестве родительского элемента div, любой дочерний элемент будет частью группы, независимо от того, сколько и где он сформирован (ngFor и т. Д.), Вы можете затем поместить элемент в элемент div. противоположная сторона вида с помощью CSS. Полезно, если вы динамически создаете DropLists в массовом порядке

0 голосов
/ 30 октября 2018

Вы можете использовать строку вместо ссылки, как указано в документации API :

@ Вход ('cdkDropListConnectedTo') connectedTo: (CdkDropList | string) [] | CdkDropList | строка

Другие перетаскиваемые контейнеры, к которым этот контейнер подключен и в который могут быть переданы предметы контейнера. Может быть ссылки на другие контейнеры или их уникальные идентификаторы.

Я сделал пример, используя список всех идентификаторов выпадающих элементов. 

allDropLists = [ 'studentsList', ...this.classRooms
 .map(_ => _.name)];

Который я передаю ClassRoomComponent в качестве ввода: 

<app-class-room
    *ngFor="let classRoom of classRooms" 
    [classRoom]="classRoom" [allDropLists]="allDropLists">

Полный пример работы здесь.

...