angular - 将外部 JS 库导入到 Angular 2 CLI @NgModule

Question

所以我一直在使用这个article通过 Angular CLI 将 Dropzone.js 导入到我的 Angular 2 项目中。虽然这篇文章是在这个问题之前 2 个多月前发布的，但我注意到这个人没有使用带有 @NgModule 的新 Angular CLI 语法。

有什么办法可以导入这个Dropzone.js npm module进入我的项目？

我已成功将 Dropzone.js 文件包含到 angular-cli.json 中的“scripts”属性中:

"scripts": [
        "../node_modules/dropzone/dist/dropzone.js"
      ],

这是我的拖放区组件:

import {
    Component,
    OnInit,
    Input,
    Output,
    EventEmitter,
    ElementRef
} from '@angular/core';
import {
    Http
} from '@angular/http';

@Component({
    selector: 'dropzone',
    templateUrl: './dropzone.component.html',
    styleUrls: ['./dropzone.component.scss']
})
export class DropzoneComponent implements OnInit {

    private _dropzone: Dropzone;

    @Input()
    element: string = ".dropzoneArea";

    @Input()
    url: string = "file/post";

    @Input()
    uploadMultiple: boolean = false;

    @Input()
    maxFileSize: number = 2048;

    @Input()
    clickable: string = ".dropzoneArea";

    @Input()
    autoProcessQueue: boolean = true;

    @Input()
    addRemoveLinks: boolean = false;

    @Input()
    createImageThumbnails: boolean = false;

    @Input()
    previewTemplate: string = "<div style='display:none'></div>";

    @Input()
    acceptedFiles: string = "*";

    @Output()
    sending: EventEmitter < boolean > ;

    @Output()
    uploadprogress: EventEmitter < number > ;

    @Output()
    success: EventEmitter < any > ;

    @Output()
    error: EventEmitter < any > ;

    constructor(private _eleRef: ElementRef, private _http: Http) {

        this.sending = new EventEmitter < boolean > ();
        this.uploadprogress = new EventEmitter < number > ();
        this.success = new EventEmitter < any > ();
        this.error = new EventEmitter < any > ();

    }

    initDropzone() {

        this._http.get("api/getCsrf").subscribe(data => {

            let body = data.json();

            this._dropzone = new Dropzone(this.element, {
                url: this.url,
                uploadMultiple: this.uploadMultiple,
                maxFilesize: this.maxFileSize,
                clickable: this.clickable,
                autoProcessQueue: this.autoProcessQueue,
                addRemoveLinks: this.addRemoveLinks,
                createImageThumbnails: this.createImageThumbnails,
                previewTemplate: this.previewTemplate,
                acceptedFiles: this.acceptedFiles,
                params: {
                    _csrf: body._csrf
                }
            });

            this._dropzone.on("sending", (file, xhr, formaData) => {

                this.sending.emit(true);

            });

            this._dropzone.on("uploadprogress", (file, progress, bytesSent) => {

                this.uploadprogress.emit(progress);

            });

            this._dropzone.on("success", (file) => {

                this.success.emit(file);

            });

            this._dropzone.on("error", (file, message) => {

                this.error.emit(message);

            });

        });

    }

    ngOnInit() {

        this.initDropzone();

    }
}

这是我加载应用程序时遇到的错误

client?93b6:76 [default] /projects/project/dropzone/dropzone.component.ts:79:33 
Cannot find name 'Dropzone'.

大家对此有什么想法吗？我实际上可以访问 Dropzone 对象，因为它附加到窗口，但我无法让我的组件找到它。

Answer 1

TypeScript 对 JS 文件一无所知，所以如果你有一些全局的东西，你仍然需要以一种或另一种方式告诉 TypeScipt。最简单的方法是声明一个任意变量

declare var Dropzone: any

这足以编译代码，因为 TypeScript 只是寻找名称 Dropzone。因为我们将其输入到any。它并不真正关心我们之后如何处理该符号。它只是接受我们知道我们正在用它做什么。

当将 JS 库与 TypeScript 一起使用时，更推荐使用 TypeScript 定义文件。如果库不支持开箱即用的 TypeScript(库中没有包含自己的定义文件)，对于流行的库，很可能已经有一个定义文件。 Dropzone 是那些流行的库之一。

npm install --save-dev @types/dropzone

现在您可以将其导入到任何需要的地方

import Dropzone from 'dropzone'

现在您应该获得强大的打字和智能感知能力。请注意，对于我来说，使用 VSCode，我必须重新启动 IDE 才能启动智能感知。这不应该是必需的，它可能是 VSCode 的错误。