如何在angular2中集成mxgraph编辑器? [英] How to Integrate mxgraph editor in angular2?

问题描述

如何通过使用JavaScript客户端库将mxgraph编辑器集成到angular2中?

How to Integrate mxgraph editor in angular2 by using JavaScript client library?

到目前为止我已经尝试过的，

What I've tried so far,

1. 我已经使用npm软件包安装了mxgraph- npmjs.com/package/mxgraph .
2. 然后如mxgraph编辑器index.html中所示，通过vendor.ts文件从其中导入所有必需的js文件.
3. 为其中的mxutil，editorUI和editor js文件创建类型定义文件.
4. 我们无法在我的angular2应用中加载图形编辑器.

1. I have installed mxgraph using the npm package -- npmjs.com/package/mxgraph.
2. Then imported all the required js file from it through vendor.ts file as shown in mxgraph editor index.html.
3. Created type definition files for mxutil, editorUI, editor js files in it.
4. We are not able to load the graph editor in my angular2 app.

所以，我想知道如何将mxgraph编辑器集成到我的angular2应用程序中.

So, I would like to know how to integrate mxgraph editor in to my angular2 app.

推荐答案

如果仍然有人在Angular 4/5/6中与mxGraph集成苦苦挣扎.然后是完整的解决方案:

If anyone still struggling with mxGraph integration in Angular 4/5/6. Then here is Complete Solution:

有关不同的mxGraph存储库的一些详细信息:

Few details about different mxGraph Repos:

Repo-1: https://github.com/jgraph/mxgraph
        This is an official release repo of mxGraph. With npm issues.

Repo-2: https://bitbucket.org/jgraph/mxgraph2
        This is an official development repo of mxGraph. With npm issues.

If anyone wants to see what npm issues with these above repos(i.e. Repo-1 and Repo-2), then check these following issues:  
            - https://github.com/jgraph/mxgraph/issues/169
            - https://github.com/jgraph/mxgraph/issues/175

Repo-3: https://bitbucket.org/lgleim/mxgraph2
        Fork of Repo-2. With npm fixes.

Repo-4: https://github.com/ViksYelapale/mxgraph2
        Fork of Repo-2. Merged npm fixes from Repo-3 as well. Added changes(i.e. required for local installation of mxGraph) to this repo.

步骤:

1. 克隆Repo-4.另外，添加官方回购协议(即Repo-2)的远程版本，以获取最新的mxGraph更新/发行版/修复程序.

1. Clone Repo-4. Also, add remote of the official repo(i.e. Repo-2) to take the latest mxGraph updates/release/fixes.

将目录更改为mxgraph2并运行npm install

Change directory to the mxgraph2 and run npm install

$ cd mxgraph2
$ npm install

$ cd mxgraph2
$ npm install

现在转到您的角度项目存储库并安装mxGraph(即我们在本地构建的mxgraph2).

Now go to your angular project repo and install mxGraph(i.e. mxgraph2 which we have build locally).

$ npm install /path/to/mxgraph2

例如npm install /home/user/workspace/mxgraph2

这将在package.json文件中添加如下所示的类似条目:

Which will add a similar entry as below in your package.json file:

"mxgraph": "file:../mxgraph2"

运行一次正常的npm安装.用于添加任何缺少/依赖的程序包.

Run normal npm install once. For adding any missing/dependency package.

$ npm install

现在我们将安装mxgraph类型

Now we will install mxgraph typings

注意-打字稿的最低要求为2.4.0

Note - Minimum required version of the typescript is 2.4.0

$ npm install lgleim/mxgraph-typings --save

现在您可以在应用程序中使用mxGraph.

Now you can use mxGraph in your app.

i. component.ts

i. component.ts

import { mxgraph } from "mxgraph";

declare var require: any;

const mx = require('mxgraph')({
  mxImageBasePath: 'assets/mxgraph/images',
  mxBasePath: 'assets/mxgraph'
});

.
.
.

ngOnInit() {
   // Note - All mxGraph methods accessible using mx.xyz
   // Eg. mx.mxGraph, mx.mxClient, mx.mxKeyHandler, mx.mxUtils and so on.

   // Create graph

   var container = document.getElementById('graphContainer');
   var graph = new mx.mxGraph(container);

   // You can try demo code given in official doc with above changes.
}

ii. component.html

ii. component.html

<div id="graphContainer"></div>

就是这样！

希望这会有所帮助.

这篇关于如何在angular2中集成mxgraph编辑器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！