Question

如何使用JavaScript客户端库在angular2中集成mxgraph编辑器？

到目前为止我已尝试过，

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

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

Answer 1

如果有人仍在努力与Angular 4/5/6中的mxGraph集成进行斗争。这是完整的解决方案：

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

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.

步骤：

克隆Repo-4。另外，添加官方repo（即Repo-2）的远程版本，以获取最新的mxGraph更新/发行版/修复程序。
将目录更改为mxgraph2并运行npm install

$ cd mxgraph2
$ npm install
现在转到您的角度项目存储库并安装mxGraph（即我们在本地构建的mxgraph2）。

$ npm install /path/to/mxgraph2

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

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

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

$ npm install
现在我们将安装mxgraph类型

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

$ npm install lgleim/mxgraph-typings --save

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

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

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

就是这样！

希望这会有所帮助。

如何在angular2中集成mxgraph编辑器？

1 个答案: