Угловое перетаскивание 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

Идея состоит в том, чтобы сохранить текущую позицию прокрутки перед открытием диалогового окна, затем прокрутить вверх, затем открыть диалоговое окно и, наконец, после закрытия диалогового окна вернуться к сохраненному месту.

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" });
}
});