我正在尝试使用新的 Angular 7 CDK 拖放来移动我网站中动态添加的元素列表。
使用这个示例，取自 Angular 文档示例并根据我的需要进行修改，您可以看到我有一个带有可放置容器的元素列表。
问题是当可拖动元素从另一个组件生成时，它们不会将父可放置作为要使用的引用可放置容器。相反，CDK Draggable 对象中的可放置容器属性是null.
我尝试设置指令中的cdkDragRootElement属性CdkDrag以检查是否可以以某种方式引用父元素，但它使元素移动整个父元素。这不是预期的行为。
也许我错过了 CDK Draggable 属性或在 CDK Droppable 容器中引用列表元素中的父可放置列表？
这是示例中的“相关”代码：
cdk-拖放-排序-example.html
<div cdkDropList class="example-list">
<app-test></app-test>
</div>
测试/test.component.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.component.html
<div class="example-box" *ngFor="let movie of movies" cdkDrag (cdkDragDropped)="drop($event)">
{{movie}}
</div>
编辑
预期结果：
cdk-拖放-排序-example.html
<div cdkDropList class="example-list">
<app-test></app-test>
</div>
测试/test.component.html
<div class="example-box" *ngFor="..." cdkDrag cdkDropList=".example-list">
{{movie}}
</div>
通过父母找到选择器并检查它是否具有cdkDropList指令/实例并将其附加到cdkDrag.