onDragOver очень медленный с вкладками Angular Material

Question

Я использую Angular 6 и Angular Material.Я пытаюсь реализовать простой список перетаскивания внутри вкладки Материал ().Перетаскивание отлично работает за пределами вкладки материала, но внутри вкладки это очень медленно (18 секунд до 1 элемента в списке из 5 элементов).OnDragEvent срабатывает много раз, даже когда мышь не движется.Я попытался отсоединить (onDragStart) и заново подключить (onDrop) детектор изменений.Это не имеет значения.

Вот HTML:

<div (dragover)="onDragOver($event)">
    <div *ngFor="let item of listItems, let i = index"
         (drop)="onDrop($event, i)"
         [draggable]="true"
         (dragstart)="onDragStart(i)">
        {{item}}
    </div>
</div>

Вот функции:

onDragStart(i) {
}


onDragOver(event) {
    console.log('1')
    event.preventDefault();
}

onDrop(event, i) {
}

Спасибо.

Answer 1

Я был в подобном положении, и после большого разочарования я нашел решение.Похоже, что когда я перетаскивал элемент по экрану - даже кратко, движок Angular перегружался и выстраивал в очередь нелепое количество вызовов onDrop и / или onDragEnter.И что, когда Angular перехватывает эти события, он также предполагает, что что-то в угловых компонентах изменилось, и проходит через процедуры обнаружения изменений.

Каждый раз ...

Что я сделал, чтобы решить эту проблему, так это отключил обнаружение изменений, когда перетаскивание началось, и снова включил его, когда перетаскивание завершилось.

Вот краткий намек на то, что я сделал:

1. импорт ChangeDetectorRef из '@ angular / core'
2. вставляет ChangeDetector в ваш конструктор: constructor (private cdr: ChangeDetectorRef)
3. вызов отсоединения от dragStart: this.chngDetRef.detach ();
4. повторный вызов вызова с перетаскивания и перетаскивания: this.chngDetRef.reattach ();

Если ваш компонент находится глубоко на вашей странице, вам, возможно, придется отменить обнаружение изменений на более высоком уровне, чтобы увидеть результаты.

Удачи!

Answer 2

У меня была похожая проблема, когда перетаскивание, когда на странице было много элементов, было невыносимо медленным.Я обнаружил, что удаление (dragover) углового связывания и замена его на чистый javascript мгновенно решили проблему

, я переключил

(dragover)="this.onDragOver($event)"

на

ondragover="onDragOver(event)"

, вы такженеобходимо объявить функцию в index.html, а не в вашем файле машинописного текста или в HTML-шаблоне (отсюда и чистый javascript)