Angular 7-具有父级可滴管容器的拖放

Question

我正在尝试使用新的Angular 7 CDK拖放来移动我的网站中动态添加的元素列表。

使用这个例子，它取自angular docs的例子，并根据我的需要进行了修改，您可以看到我有一个带有可丢弃容器的元素列表。

问题是，当可拖动元素从另一个组件生成时，它们不会将父级可丢弃元素作为要使用的引用可丢弃容器。相反，CDK可拖动对象中的可丢弃容器属性是null。

我曾尝试从CdkDrag指令中设置cdkDragRootElement属性，以检查是否可以以某种方式引用父元素，但它会使元素移动整个父元素。这不是预期的行为。

也许我缺少CDK Dragable属性或CDK Droppable容器中引用列表元素中父级可丢弃列表的属性？

以下是示例中的"相关"代码：

cdk拖放排序示例.html

<div cdkDropList class="example-list">
<app-test></app-test>
</div>

测试/测试组件.ts

import { Component, OnInit } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
movies = [
'Episode I - The Phantom Menace',
'Episode II - Attack of the Clones',
'Episode III - Revenge of the Sith',
'Episode IV - A New Hope',
'Episode V - The Empire Strikes Back',
'Episode VI - Return of the Jedi',
'Episode VII - The Force Awakens',
'Episode VIII - The Last Jedi'
];
constructor() { }
ngOnInit() {
}
drop(event: CdkDragDrop<string[]>) {
console.log(event);
/*moveItemInArray(this.movies, event.previousIndex, event.currentIndex);*/
}
}

test/test.component.html

<div class="example-box" *ngFor="let movie of movies" cdkDrag (cdkDragDropped)="drop($event)">
{{movie}}
</div>

编辑

预期结果：

cdk拖放排序示例.html

<div cdkDropList class="example-list">
<app-test></app-test>
</div>

test/test.component.html

<div class="example-box" *ngFor="..." cdkDrag cdkDropList=".example-list">
{{movie}}
</div>

遍历父级以找到选择器，并检查它是否有cdkDropList指令/实例，并将其附加到cdkDrag。

Answer 1

属性cdkDropList必须在app-test上-这是带有项目列表的DOM元素

Answer 2

问题是在组件级别添加时，DOM无法识别cdkdropList。有两种方法可以实现这一点。
1( 如果我们在测试组件中移动cdkDragList。这是显而易见的，你可能不感兴趣。
2( 您可以使用DragDrop服务在父级添加拖动列表。这种使用拖放作为服务的功能是在Angular CDK 7.3.7中发布的。

参考stackblitzhttps://stackblitz.com/edit/angular-ngtemplate-reorder-7i6uuk?file=src%2Fapp%2Fapp.component.ts用于使用服务实现拖放。