Angular .nozone 文件上传组件

Question

我正在 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>

我的问题是这方面的性能很糟糕（drop 和 saveFiles() 之间的滞后时间约为 4 秒运行），因为每个 dragover 的变化检测都是运行并且dragleave 事件已触发。在进行了大量研究之后，我发现最好的解决方案应该是从 ngzone 中删除 dragover 事件，这将阻止更改检测被触发。来自这里：https://github.com/angular/angular/pull/21681 一个非常简单的方法似乎是 (dragover.nozone)="stopAndPrevent($event)"。这确实解决了性能问题，但它也不再有效，因为浏览器恢复到使用其默认行为（在浏览器中加载文件）而忽略 event.preventDefault();。有谁知道更好的方法或知道如何解决我运行遇到的性能问题？

Answer 1

找到解决办法。通过关注 https://github.com/JiaLiPassion/blacklist/blob/master/src/index.html 并添加

将来自 zone.js 的拖拽事件列入黑名单

<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

Answer 2

您可以使用 lodash-decorators 中的油门。它会阻止装饰函数运行比你给它作为参数的毫秒数更频繁。

@Throttle(300) public stopPreventAndSetClass(b: boolean, event: any): void {
   //...
}

Angular .nozone 文件上传组件

Angular .nozone file uploader component

angular

file-upload

angular-changedetection

ngzone