Angular Material : Not able to drop on a dynamically created droplist

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 official site 上显示的示例并无不同。 ，但是，相同的文档宣传了 createDropList() 的能力 here给定一个本地元素。如果您进一步检查它 - 代码会创建一个 DropListRef 并向 DOM 添加一个元素，但是，它不会响应 dropped、entered 等事件。感觉我错过了一些重要的步骤，比如在某处注册它或连接到另一个 DropList，然后 Angular Material 可以识别或识别它。
2. 我无法创建单个组件的原因(例如 - Dropbox 组件)是因为那样会使手头的问题过于简单化。与问题相关的复杂性太多，无法封装在单个组件中，如 Dropbox 组件(或多个)。如果我为每个用例创建一个模板，我可能最终会创建 100 多个 ng 模板(或不同的组件)。

Answer 1

您的编码方式不是典型的 Angular 编码方式。我查了Angular official site并为您做了一点调整。

我用 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>

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

编码愉快!