如何在两个组件之间使用Angular7(角度材质)拖放

Question

最近角度引入角度材料的拖放 https://material.angular.io/cdk/drag-drop/overview.

所有示例都在单个组件中描述.如何在两个不同的组件中使用它,拖动一个组件项并放入另一个组件.

Answer 1

您可以使用属性id和cdkDropListConnectedTo来链接两个列表:

第1部分:

<div cdkDropList id="list-1" cdkDropListConnectedTo="list-2" (cdkDropListDropped)="drop($event)">
    <div *ngFor="let item of list" cdkDrag>{{ item }}</div>
</div>

第2部分:

<div cdkDropList id="list-2" cdkDropListConnectedTo="list-1" (cdkDropListDropped)="drop($event)">
  <div *ngFor="let item of list" cdkDrag>{{ item }}</div>
</div>

如果需要将多个列表连接到一个列表,可以使用以下语法: [cdkDropListConnectedTo]="['list-1', 'list-2', 'list-3', 'list-4']"

链接列表后,您必须根据操作正确更新一个或两个列表.您可以在drop函数上执行此操作:

drop(event: CdkDragDrop<string[]>) {
    if (event.container.id === event.previousContainer.id) {
      // move inside same list
      moveItemInArray(this.list, event.previousIndex, event.currentIndex);
    } else {
      // move between lists
    }
}

对于在列表之间移动项目,您可能希望集中跟踪列表.您可以使用服务,商店或其他方法来完成此操作.

Answer 2

您只需在服务中创建一个 drop 方法并从两个组件调用该 drop 方法。并且必须在父组件上使用 cdkDropListGroup 包装这两个组件。

应用程序组件

<div class="wrapper">
  <div cdkDropListGroup>
    <app-test1></app-test1>
    <app-test2></app-test2>
  </div>
</div>

测试1组件

<div class="container">
  <h2>Movies</h2>
  <div cdkDropList [cdkDropListData]="MoviesList"
    class="movie-list" (cdkDropListDropped)="onDrop($event)">
    <div class="movie-block" *ngFor="let moviesList of MoviesList" cdkDrag>{{moviesList}}</div>
  </div>
</div>

  export class Test1Component implements OnInit {

  constructor(private ss: ShareService) { }

  ngOnInit() {
  }

  // Transfer Items Between Lists
  MoviesList = [
    'The Far Side of the World',
    'Morituri',
    'Napoleon Dynamite',
    'Pulp Fiction',
    'Blade Runner',
    'Cool Hand Luke',
    'Heat',
    'Juice'    
  ];


  onDrop(event: CdkDragDrop<string[]>) {
    this.ss.drop(event);
  }

}

测试2组件

<div class="container">
  <h2>Movies Watched</h2>
  <div cdkDropList [cdkDropListData]="MoviesWatched"
    [cdkDropListConnectedTo]="list-1" class="movie-list" (cdkDropListDropped)="onDrop($event)">
    <div class="movie-block" *ngFor="let moviesWatched of MoviesWatched" cdkDrag>{{moviesWatched}}</div>
  </div>
</div>

import { Component, OnInit } from '@angular/core';
import { CdkDragDrop } from '@angular/cdk/drag-drop';
import { ShareService } from '../share.service';


@Component({
  selector: 'app-test2',
  templateUrl: './test2.component.html',
  styleUrls: ['./test2.component.css']
})
export class Test2Component implements OnInit {

  constructor(private ss: ShareService) { }

  MoviesWatched = [
   'Transformers'
  ];

  ngOnInit() {
  }

  onDrop(event: CdkDragDrop<string[]>) {
    this.ss.drop(event);
  }

}

共享服务

import { Injectable } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';


@Injectable()
export class ShareService {

  constructor() { }

  public drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }
  }

}

这是工作链接

Answer 3

不确定上述解决方案是否仍然适用于 angular 7.2.9 和 angular material/cdk 7.3.5

它对我不起作用，因此经过一段时间的努力 - 我设法使用cdkDropListGroup指令使其工作。所有cdkDropList内cdkDropListGroup将可掉落物品。您不再需要使用cdkDropListConnectedTo属性连接下拉列表

<div cdkDropListGroup>
<component1></component1>
<component2></component2>
</div>