如何从 Angular2+ 的 mat-tree 中的 drop 事件中获取 mat-tree-node 元素？

Question

我有一个要求，我需要在两个具有树状结构的容器之间实现拖放。一个容器是 TODO，另一个是 Done。它正在工作，但丢弃的数据总是附加到容器 2（完成）的节点 1，因为我不知道如何找到丢弃的容器节点索引？

这里是代码。工作演示可以找到here

import './polyfills';

import {HttpClientModule} from '@angular/common/http';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatNativeDateModule} from '@angular/material';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {DemoMaterialModule} from './material-module';

import {TreeFlatOverviewExample} from './app/tree-flat-overview-example';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    DemoMaterialModule,
    MatNativeDateModule,
    ReactiveFormsModule,
  ],
  entryComponents: [TreeFlatOverviewExample],
  declarations: [TreeFlatOverviewExample],
  bootstrap: [TreeFlatOverviewExample],
  providers: []
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

现在将“Other”拖放到“Done”容器中打开节点 1。您将能够看到拖放的元素。

要求：我想从 TODO 容器中拖拽到容器 2 的确切节点中。 快速帮助将不胜感激。

Answer 1

好的，最后经过一些研究，我能够通过使用“div”和“cdkDropListGroup”连接多个放置区域的属性来实现要求。

根据角度If you have an unknown number of connected drop lists, you can use the cdkDropListGroup directive to set up the connection automatically. Note that any new cdkDropList that is added under a group will be connected to all other lists automatically

在放置容器中，我不能使用 mat-tree，因为这需要一个无法动态定义的数据源属性（截至目前我知道）。而在我的情况下，我想要多个动态放置区域，所以我使用了“div”

下面是工作链接，如果有人需要这种实现，请参考下面的链接。我希望这可以节省一些时间。

drag-n-drop-treelist