CDK DropLists в отдельных компонентах - PullRequest
Новая
       8

CDK DropLists в отдельных компонентах

0 голосов
/ 18 января 2019

Я новичок в Angular. Я хочу реализовать функцию перетаскивания в моем приложении angular 6. Я наткнулся на очень хорошую библиотеку "CDK".

Я успешно реализовал функцию переноса элементов между двумя списками. Оба списка находятся в одном компоненте.

Сейчас я работаю над разделением компонентов списка. Я поместил droplist1 в list-a-component.html, а его массив элементов - в list-a-component.html. Аналогично для droplist2.

Но это не работает. Я могу перемещать элементы в списках, но не могу переносить их из одного в другой.

В ходе расследования выяснилось, что когда html отображает оба списка, в html отсутствует значение "ng-refle-connected-to". Его ноль. 

<div _ngcontent-c1="" cdkdroplist="" class="example-list cdk-drop-list" ng-reflect-connected-to="" ng-reflect-data="Get to work,Pick up groceries," id="cdk-drop-list-2">

1 Ответ

0 голосов
/ 05 августа 2019

Если выпадающий список (Drop Zone) находится в другом компоненте, он не является прямым.Чтобы это работало, нам нужно создать выпадающий список в компоненте-источнике и компоненте-получателе и соединить два списка вывода, используя cdkDropListConnectedTo .

drag-source-componentet.ts 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-drag-source',
  templateUrl: './drag-source.component.html',
  styleUrls: ['./drag-source.component.css']
})
export class DragSourceComponent implements OnInit {
  data = [
    "apple",
    "boy",
    "cat",
    "dog",
    "elephant"
  ]
  constructor() { }

  ngOnInit() {
  }

}
.example-list {
  width: 500px;
  max-width: 100%;
  border: solid 1px #ccc;
  min-height: 60px;
  display: block;
  background: white;
  border-radius: 4px;
  overflow: hidden;
}
<p>
Drag Source 
</p>

<div id="source" cdkDropList [cdkDropListConnectedTo]="['destination']" class="example-list">
  <ul>
    <li cdkDrag [cdkDragData]="item" *ngFor="let item of data">
      {{ item }}
    </li>
  </ul>
</div>

drop-destination-componentet.ts 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-drop-destination',
  templateUrl: './drop-destination.component.html',
  styleUrls: ['./drop-destination.component.css']
})
export class DropDestinationComponent implements OnInit {
  data = []
  constructor() { }

  ngOnInit() {
  }

  drop(event) {
    this.data.push(event.item.data);
  }

}
.example-list {
  width: 500px;
  max-width: 100%;
  border: solid 1px #ccc;
  min-height: 60px;
  display: block;
  background: white;
  border-radius: 4px;
  overflow: hidden;
}
<p>
Destination Drop Zone
</p>

<div id="destination" class="example-list" style="height: 200px; border: 2px solid black" cdkDropList [cdkDropListConnectedTo]="['source']" (cdkDropListDropped)="drop($event)">
    <ul>
    <li *ngFor="let item of data">
      {{ item }}
    </li>
  </ul>
</div>

Чтобы увидеть полное решение, пожалуйста, посетите stackblitz

...