角度拖放 cdk 在角度材质对话框中不起作用

Question

我想通过拖放角度的 CDK 来更改列表顺序。 它适用于我网站中的任何页面，但是当我在材质对话框中使用它时，它不起作用。 当我将一个列表项拖到另一个项目上时，它不会在拖动时改变位置，也不会在放置时改变。 有什么特别的事情可以让它在对话框中工作吗？

我正在尝试的最简单的代码：

HTML

<div cdkDropList (cdkDropListDropped)="drop($event)">
  <div cdkDrag *ngFor="let n of numbers">
    {{n}}
  </div>
</div>

ts 文件

import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

numbers: number[]= [];

constructor() {
  this.n.push(2,3,4,5);
}

drop(event: CdkDragDrop<number[]>) {
  moveItemInArray(this.numbers, event.previousIndex, event.currentIndex);
}

app.module.ts

import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({ imports: [..., DragDropModule]})

正如我所说，这段代码可以在任何页面的任何地方工作，但是当我将它复制到对话框组件时它不起作用

Answer 1

在这里找到了一个临时解决方案（@DeonduPreez）：

https://github.com/angular/components/issues/15880#issuecomment-523476619

这个想法是在对话框打开之前保持当前滚动位置， 然后滚动到顶部， 然后打开对话框， 最后，在对话框关闭后，滚动回保存的位置。

const doc = document.documentElement;
const left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);

if (top != 0 || left != 0) {
  window.scrollTo({ top : 0, left: 0 });
}
const modal: MatDialogRef = this.dialog.open(ModalComponent);
modal.afterClosed().subscribe(() => {
if (top != 0 || left != 0) {
    window.scroll({ top : top, left : left, behavior: "smooth" });
}
});