如何在angular2中集成in图形编辑器？

Question

如何利用angular2客户端库集成JavaScript编辑器？

我已经尝试过了，

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

因此，我想知道如何将my图形编辑器集成到我的angular2应用程序中。

Answer 1

如果有人仍然在角形4/5/6的角度上挣扎于mxGraph集成，那么下面是完整的解决方案：

很少有关于不同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. 克隆人回购-4。另外，添加官方回购的远程(即Repo-2)，以获取最新的mxGraph更新/发布/修复。
2. 将目录更改为mxgraph2并运行npm $ cd mxgraph2 $ npm install
3. 现在转到您的并安装mxGraph(即我们在本地构建的mxgraph2 )。 $ npm install /path/to/mxgraph2 例如npm install /home/user/workspace/mxgraph2 它将在您的package.json文件中添加类似的条目如下： "mxgraph": "file:../mxgraph2"
4. 运行正常npm安装一次。用于添加任何缺少的/依赖项包。 $ npm install
5. 现在，我们将安装mxgraph类型。 注:打字本的最低要求版本为2.4.0 $ npm install lgleim/mxgraph-typings --save
6. 现在，您可以在应用程序中使用mxGraph。 一. component.ts 从“mx图”导入{ mxgraph }；声明var需要量: any；const mx=需要量(‘mx图’)({ mxImageBasePath：‘assets/mx图/映像’，mxBasePath：'assets/mxgraph‘})。。。ngOnInit() { // Note -使用mx.xyz // Eg访问的所有mxGraph方法。mx.mxGraph，mx.mxClient，mx.mxKeyHandler，mx.mxUtils等。//创建图var容器= document.getElementById('graphContainer')；var图=新的mx.mxGraph(容器)；//您可以尝试在正式文档中给出的演示代码，并进行上述更改。} 二、component.html <div id="graphContainer"></div>
7. 就这样!！

希望这会有帮助。