Jsplumb angular2 implmenetation

Question

我遇到了在angular2上使用Jsplumb的问题。

我正在尝试使用组件在angular2中对jsplumb进行分层，但是我收到错误说 jsPlumb.ready不是函数

我是通过npm导入它并将它放在我的vendor.js中用于webpack

这是component.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
var $ = require('jquery');
var jsPlumb = require('jsplumb');
@Component({
    selector: 'jsplumb-plot',
    template: require('./jsplumb.plot.component.html'),
    providers: []
})
export class JsplumbPlotComponent implements OnInit {

    constructor() {

    }

    ngOnInit() {
        jsPlumb.ready(function () {
            console.log("this");
        });
    }
}

这是webpack导入

module.exports = {
    resolve: {
        extensions: [ '', '.js' ]
    },
    module: {
        loaders: [
            { test: /\.(png|woff|woff2|eot|ttf|svg|gif)(\?|$)/, loader: 'url-loader?limit=100000' },
            { test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) }
        ]
    },
    entry: {
        vendor: [
            ....
            'jsplumb/dist/css/jsplumbtoolkit-defaults.css',
            'jsplumb/dist/js/jsplumb.min.js'
        ]
    },

请注意，在webpack编译之后，我在vendor.js中看到了jsplumb的javascript代码。问题是我仍然无法打电话。

Answer 1

显然，导入它的正确方法是，

import { jsPlumb } from 'jsplumb';