Question

我刚刚开始使用角度2，我已经完成了基本的快速启动。现在我正在玩它，我已经打了一个块。我正在尝试使用dropzone.js。

我在其他地方读到只需添加脚本就可以使用外部库，并在组件中执行此操作：

//index.html
<script src="node_modules/dropzone/dropzone.js"></script>

//app.component.ts
declare var Dropzone: any;
...
constructor(){
  var myDropzone = new Dropzone("div#myId", { url: "/file/post"});
  //I added a div with same ID as here to my template.
}

这对我不起作用。我还尝试使用this angular 1指令dropzone.js作为创建一个角度2的参考，但我有点迷失，因为我以前从未使用过角度1。

Answer 1

在index.html文件中添加了dropzone.js文件后：

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/dropzone.js"></script>

您可以将其链接到组件的根元素：

@Component({
  selector: 'dropzone',
  template: `
    <div>Drop down area</div>
  `
})
export class DropZoneComponent {
  constructor(eltRef:ElementRef) {
    new Dropzone(eltRef.nativeElement, { url: "/file/post"});
  }
}

这是一个描述这个问题的傻瓜：https://plnkr.co/edit/gV9fuWqALB7g7v7ZxWD4?p=preview。

Answer 2

这是工作示例：

import {Component} from 'angular2/core';

@Component({
  selector: 'dropzone',
  template: `
    <div id="myId" style="width: 200px; height: 200px; background-color: gray;">Drop down area</div>
    `
})
export class DropzoneComponent {
  private _dropzone: Dropzone;

  constructor() {
    System.import('./dropzone.js').then((dz) => this.initDropzone(dz));
  }

  initDropzone(d: any) {
    this._dropzone = new d('div#myId', { url: '/file/post'});
  }
}

plnkr.co

在本地安装dropzone软件包（例如使用npm：npm install dropzone --save）
安装dropzone（typings install dropzone --save --ambient）的输入法。它允许您使用强类型变量。
在dropzone加载后查看promise - 您必须传递带有分配给初始化方法（initDropzone(d: any)）的函数的变量。
不需要在index.html中链接dropzone脚本。只有在加载某个组件（DropzoneComponent）时才会加载Dropzone。

如果您有任何问题，欢迎您。

以角度2

2 个答案: