angular - Angular Material：无法拖放到动态创建的下拉列表中

Question

出于某种原因（阅读：无法创建许多组件），我必须在我的应用程序上创建能够充当放置元素的部分。（不能使用*ngIf）

我创建了 DropListRef 像 -

constructor(private dragDropService: DragDrop) {} 

const dropListRef = this.dragDropService
      .createDropList(dropZone)
      .withItems([]);

我正在尝试检测一个元素是否已被删除 -

dropListRef.dropped.subscribe(event => {
      console.log("dropped: ");
});

但是，我从来没有找到控制台输出。

链接到示例代码 - https://stackblitz.com/edit/angular-r3spyc

链接到演示视频 - https://drive.google.com/file/d/1b6RUuOk9r7s9vFd3NlhgR9ot1hHP1Oeb/view

无法创建许多组件

1. 我所写的方式与Angular 官方网站上显示的示例并不典型，但是，相同的文档在给定原生元素的情况下宣传了 createDropList() 的能力。如果您进一步检查它 - 代码会创建一个 DropListRef 并向 DOM 添加一个元素，但是，它不会响应诸如dropped,之类的事件entered。感觉我错过了一些重要的步骤，比如在某处注册它或与其他 DropList 连接，然后 Angular Material 可以识别或识别它。
2. 我无法创建单个组件（例如 - a Dropbox component）的原因是因为这会过度简化手头的问题。与问题相关的复杂性太多，无法封装在像Dropbox component（或许多）这样的单个组件中。如果我走为每个用例创建模板的路线，我可能最终会创建 100 多个 ng 模板（或不同的组件）。

标签： angularangular-material-6angular-material-7

Answer 1

你编码的方式不是为 Angular 编码的典型方式。我查看了Angular 官方网站并为您做了一些调整。

我用drop-box.component.html创建了一个下拉框组件：

<div>{{text}}</div>

drop-box.component.ts：

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

@Component({
  selector: "drop-box",
  templateUrl: "./drop-box.component.html",
  styleUrls: ["./drop-box.component.scss"]
})
export class DropboxComponent {
  @Input() text = "";
  constructor() {}
}

对于您的app.component.ts：

import { Component } from "@angular/core";
import {
  CdkDragDrop,
  CdkDrag,
  DragDropRegistry,
  DragDrop,
  DragRef,
  moveItemInArray,
  transferArrayItem
} from "@angular/cdk/drag-drop";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  title = "angular-draggable";
  previousIndex = 0;

  todo = ["a", "b", "c", "d", "e"];
  list = ["default item"];
  isEnabled = false;

  constructor(private dragDropService: DragDrop) {}

  onDragStart(event, i) {
    console.log("drag started!", event);
    console.log('event.previousIndex',event.previousIndex);
    console.log('i',i);
    this.previousIndex = i;
  }

  createDroplist() {
    this.isEnabled = !this.isEnabled;
  }

  drop(event: CdkDragDrop<string[]>){
    if(this.isEnabled)
    {
      transferArrayItem(event.previousContainer.data,
                        event.container.data,
                        this.previousIndex,
                        event.currentIndex);
    }
  }
}

请注意，可能不再需要“单击我以创建下拉列表”按钮和 createDroplist 方法。但是我把它放在那里是为了启用/禁用拖动，以防你仍然需要它。

和app.component.html：

<div cdkDropListGroup>
  <div class="example-container">
    <h2>To do</h2>

    <div style="position: relative;">
      <ng-container *ngFor="let item of todo; let i = index">
        <div cdkDropList #todoList="cdkDropList" class="example-list" [cdkDropListData]="todo" [cdkDropListConnectedTo]="[doneList]">
          <div class="example-box stupid">{{item}}</div>
          <div class="example-box" (cdkDragStarted)="onDragStart($event, i)" cdkDrag>{{item}}</div>
        </div>
      </ng-container>
    </div>
  </div>


  <button (click)="createDroplist()">
    Click me to create droplist
  </button>
  <div id='box' cdkDropList
    #doneList="cdkDropList"
    [cdkDropListData]="list"
    [cdkDropListConnectedTo]="[todoList]"
    (cdkDropListDropped)="drop($event)">
    <div *ngFor="let item of list">
      <drop-box [text]="item"></drop-box>
    </div>
  </div>
</div>

你可以在这里查看我的示例。同样，要从待办事项列表中拖动，您现在需要先单击“单击我创建下拉列表”按钮，然后放置。

快乐编码！