angularjs-directive - 在 Angular 2 中为外部库创建指令

Question

我刚刚开始使用 Angular 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 dropzone.js 的 Angular 1 指令作为为 Angular 2 创建指令的引用，但我有点迷失，因为我以前从未使用过 Angular 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"});
  }
}

这里有一个 plunkr 描述了这一点:https://plnkr.co/edit/gV9fuWqALB7g7v7ZxWD4?p=preview .