带有角度 4 的拖放区 js

Question

之前有人使用过角度为 2 或 4 的 dropzone Js 库吗？ 以及是否有一些有用的示例或链接 谢谢

Answer 1

有一个用于 Dropzone 的 Angular 5+ 包装器，可以在这里找到。

Answer 2

也许有点晚了，经过一些研究，我发现了这些信息，可以使用 Angular 5.0.2 制作工作 dropzone 5：

• 将 Dropzone.js 库置于src/js/下(如果尚未创建，请创建js目录(
• 在.angular-cli.json的脚本列表中添加js/dropzone.js

• 如此处所述，在 cmd/shell 中，在角度项目(.angular-cli.json所在的根目录(运行以下命令：

  npm install --save @types/dropzone
  

• 现在，您可以在打字稿类中导入拖放区，如下所示：

  import * as dropzone from 'dropzone';
  

您也可以将其集成为 Angular 组件 (Angular 2+(，如本文所述。

警告：我没有测试它，因此，也许有些东西丢失或错误。我终于使用了另一个库。

Answer 3

如果您没有绑定到dropzone.js，因为它没有针对 Angular 进行优化，我可能会向您推荐以下库。

我编写了一个高度可定制的 Angular 组件，它实现了拖放行为。它返回已删除文件的列表作为输出事件。
这可以在这里找到。

导入模块后，您可以访问该组件：

<ngx-dropzone [multiple]="false" [maxFileSize]="2000"></ngx-dropzone>

您有一些选项可以设置，并且它带有不错的默认样式(屏幕截图可以在GitHub存储库中找到(。如果您愿意，您甚至可以使用自己的div容器和自定义样式和悬停效果，并将其放在拖放区中。有关此内容的详细信息，请参阅 API 说明。

<ngx-dropzone [customContent]="customDropzone" (filesDropped)="onFilesDropped($event)">
<ng-template #customDropzone>
<div class="custom-dropzone">
This is my custom content
</div>
</ng-template>