javascript - Jsplumb Angular 2 实现

Question

我在 angular2 上实现 Jsplumb 时遇到问题。

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

我通过 npm 导入它并将其放入 webpack 的 vendor .js

这是组件.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';