将FineUploader与Typescript一起使用(Angular2项目) [英] Use FineUploader with Typescript (Angular2 project)

问题描述

在我的angular2项目中使用fineuploader库时遇到了问题.我找不到没有直接在索引html文件中不使用fineuploader.js的方法来实现它.有没有实现Typescript的示例?谢谢你

I'm facing a problem to use fineuploader library to my angular2 project. I Don't find a way to implement it without using fineuploader.js directly in the index html file. Is there an example of implementation for Typescript? Thank u

***Gulpfile***


    gulp.task('restore:fine-uploader', function () {
    gulp.src([
        'node_modules/fine-uploader/**/*.*'
    ]).pipe(gulp.dest(libs + 'fine-uploader'));
    });

    gulp.task('restore',
    [
    'restore:core-js',
    'restore:zone.js',
    'restore:reflect-metadata',
    'restore:systemjs',
    'restore:rxjs',
    'restore:angular-in-memory-web-api',
    'restore:angular',
    'restore:bootstrap',
    'restore:ng2-pagination',
    'restore:fine-uploader'
    ]);

***Systemjs.js***

    (function (global) {
    System.config({
        baseURL: "/",
        paths: {
            // paths serve as alias
            'npm:': './libs/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic':
                'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'ng2-pagination': 'npm:ng2-pagination',
            'fine-uploader': 'npm:fine-uploader',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            },
            fineUploader: {
                main: 'fine-uploader/fine-uploader.min',
                defaultExtension: 'js'
            },
}
    });
})(this);

**** upload.component.ts ****

****upload.component.ts****

import { Component } from '@angular/core';
import { FineUploader } from 'fineUploader';
@Component({
    selector: 'app-upload',
    templateUrl: './app/upload/upload.component.html'
})
export class UploadComponent {

}

推荐答案

好，我想我明白了. Fine-Uploader是一个JS库，没有我们可以使用的Typescript文件.我们无法将库直接导入到我们的TS文件中.解决方案是声明一个像declare var qq:any;这样的上载对象，我们可以在导出类中使用它.

Ok I think I've understand. Fine-Uploader is a JS library with no Typescript files which we can use. WE CAN'T Import directly the library to our TS file. The solution is to declare a fine-uploader object like declare var qq:any; which we can use in our export class.

这篇关于将FineUploader与Typescript一起使用(Angular2项目)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！