Question

嗨，我有一个父组件和一个子组件列表：
我必须将我的子组件创建为重新排序列表 (https://material.angular.io/cdk/drag-drop/overview#cdk-drag-drop-sorting)。
我的实现如下：
家长 TS：

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

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

    childData: Array<{
        name: string;
        age: number;
    }>  = [];

    ngOnInit() {
        this.childData.push({
            name: 'ABC'
            age: 12
        });
        this.childData.push({
            name: 'XYZ'
            age: 15
        });
        this.childData.push({
            name: 'MNO'
            age: 17
        });
    }

    drop(event: CdkDragDrop < string[] > ) {
        moveItemInArray(this.childData, event.previousIndex, event.currentIndex);
    }
}

父 HTML：

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
   <div class="example-box" *ngFor="let child of childData" cdkDrag>
      <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
      <app-child [data]="child">
      </app-child>
   </div>
</div>

父 CSS：

.example-list {
  width: 100%;
  max-width: 100%;
  display: block;
  background: transparent;
  border-radius: 4px;
  overflow: hidden;
}

.example-box {
  padding: 20px 10px;
  color: rgba(0, 0, 0, 0.87);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  cursor: move;
  background: transparent;
  font-size: 14px;
}

.cdk-drag-preview {
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
              0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-placeholder {
  opacity: 0;
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.example-box:last-child {
  border: none;
}

.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.example-custom-placeholder {
  background: #ccc;
  border: dotted 3px #999;
  min-height: 60px;
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

儿童 TS：

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

 @ Component({
    selector: 'app-child',
    templateUrl: './app-child.component.html',
    styleUrls: ['./app-child.component.css']
})
export class ChildComponent {

    @Input() data: {
        name: string;
        age: number;
    };
}

子 HTML：

<label>{{data.name}}</label>
<label>{{data.age}}</label>

虽然我可以拖动组件，但是没有调用 drop 事件。提前致谢。

拖放以获取角度组件列表

0 个答案: