Угловой компонент загрузки файлов .nozone - PullRequest
Новая
       46

Угловой компонент загрузки файлов .nozone

0 голосов
/ 02 января 2019

Я работаю в Angular 7, пытаясь создать компонент для перетаскивания файлов. У меня это работает ниже. 

public stopPreventAndSetClass(b: boolean, event: any): void {
    if (event.target === this.enterTarget) {
        this.draggedOverTable = b;
    }
    console.log(event.target);
    this.stopAndPrevent(event);
}

public stopAndPrevent($event: any): void {
    event.preventDefault();
    event.stopPropagation();
}
<div class="document-container"
    (drop)="saveFiles($event); stopPreventAndSetClass(false, $event)"
    (dragenter)="enterTarget = $event.target; stopPreventAndSetClass(true, $event)"
    (dragover)="stopAndPrevent($event);"
    (dragleave)="stopPreventAndSetClass(false, $event)"
    [ngClass]="{'showDropContainerBorder': draggedOverTable}">
    <!-- An Angular Material table of uploaded files sits here. So think many child elements. -->
</div>

Моя проблема в том, что производительность на этом уровне ужасна (~ 4-секундное время задержки между drop и saveFiles () работает), потому что обнаружение изменений выполняется для каждого события dragover и dragleave. Проведя большое количество исследований, я обнаружил, что наилучшее решение - удалить событие dragover из зоны ngzone, что предотвратит срабатывание обнаружения изменений. Отсюда: https://github.com/angular/angular/pull/21681 Очень простой способ сделать это, кажется, (dragover.nozone)="stopAndPrevent($event)". Это исправляет проблему производительности, но также больше не работает, поскольку браузер возвращается к использованию по умолчанию (загрузка файла в браузер), игнорируя event.preventDefault();. Кто-нибудь знает лучший способ сделать это или знает, как исправить проблему с производительностью, с которой я здесь сталкиваюсь?

Ответы [ 2 ]

0 голосов
/ 03 января 2019

Вы можете использовать газ из lodash-decorators . Это предотвратит выполнение декорированной функции чаще, чем количество миллисекунд, которое вы даете ей в качестве параметра. 

@Throttle(300) public stopPreventAndSetClass(b: boolean, event: any): void {
   //...
}
0 голосов
/ 02 января 2019

Нашел решение.Внесение в черный список событий dragover из zone.js, следуя https://github.com/JiaLiPassion/blacklist/blob/master/src/index.html и добавляя 

<script>
    var targets = [window, Document, HTMLBodyElement, HTMLElement];
    __Zone_ignore_on_properties = [];
    targets.forEach(function (target) {
      __Zone_ignore_on_properties.push({
        target: target,
        ignoreProperties: ['dragover']
      });
    });
    __zone_symbol__BLACK_LISTED_EVENTS = ['dragover'];
    __Zone_disable_requestAnimationFrame = true;
</script>

в мой index.html

...