Jsplumb Angular 2 实现答案

【问题标题】：Jsplumb angular2 implmenetationJsplumb Angular 2 实现
【发布时间】：2017-05-22 16:22:28
【问题描述】：

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

我正在尝试将 angular2 中的 jsplumb 与一个组件分层，但我收到一条错误消息，提示 jsPlumb.ready 不是函数

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

这里是组件.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 代码。问题是我仍然无法从中调用。

【问题讨论】：

标签： javascript angular jsplumb

【解决方案1】：

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

import { jsPlumb } from 'jsplumb';

【讨论】：