mxGraph及其与角度8的类型集成

Question

[当我使用任何mxgraph方法/值时，我的mxgraph是'undefined'

我已经在该线程上尝试了维克斯答案：How to integrate mxGraph with Angular 4?

但是即使这使我的打字和智能感知工作正常，我仍然没有定义我的mxgraph。

我应该提到，这是一个全新的角度项目，我只是按照viks的教程到达这里。

import { mxgraph } from "mxgraph";

declare var require: any;

const mx = require('mxgraph')({
  mxBasePath: 'assets/mxgraph'
});
@Component({...})
export class LetestComponent implements OnInit {
  ngOnInit() {
    var container = document.getElementById('graphContainer');
    var graph = new mx.mxGraph(container);
  }
}

此内容在HTML文件中

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

我在那里应该没有任何错误，我应该能够使用mx调用任何mxGraph方法。

当我编译代码时，它似乎工作正常，但是当我在浏览器的控制台上查看它时，我会得到：

“ Uncaught TypeError：无法设置未定义的属性'mxBasePath'在build.js：11在Module ../ src / app / letest / letest.component.ts（letest.component.ts：6）“

我不知道这是不是一个问题，因为我使用的是angular 8，而viks的答案是angular 4，或者它与打字稿语法有关，此后可能会发生变化。

如果有人可以帮助我，那就太好了，

提前感谢！

编辑：我仍在尝试很多事情，但我认为我并不真正理解“ require（'mxgraph'）”部分，即使在那里mx常量不是undefined，也存在未定义的部分我将其记录到该类的控制台中。也许在Angular 8中有一种新方法可以做同样的事情？

我还应该提到，mxgraph的类型在Visual Code Studio中似乎运行良好，就像我有定义但没有实际的代码。

编辑2：进一步潜水后，我开始使用https://itnext.io/how-to-integrate-mxgraph-with-angular-6-18c3a2bb8566但是问题在于这些类型已经使用了4年，因此缺少最新的mxgraph版本中的大量方法/变量。

我发现这些类型中只有（正在工作）

declare class mxGraph{..}

使用最新的类型（不起作用）

declare namespace mxgraph {
  export class mxGraph {..}
}

有人可以解释这些差异吗？

Answer 1

MxGraph是用JavaScript编写的库。 Angular使用的TypeScript具有类型（顾名思义），然后编译为JavaScript（没有静态类型）。为了使TypeScript知道JS库中的正确类型等，您需要一些类型定义。

据我所知，对于MxGraph没有这样的类型定义。

不必阻止我们，我们仍然可以使用JS库！这是我在项目中使用MxGraph的方式：

我在package.json中具有正常的依存关系："mxgraph": "^3.9.12",

但是我们还需要告诉Angular在哪里可以找到JS脚本！看看我的“ angular.json”文件：

{
   "projects": {
      "architect": {
        "build": {
          "options": {
              "scripts": [
                    "node_modules/mxgraph/javascript/mxClient.js"
              ]}
        }
      }
    }
}

注：我仅包括相关的部分。我需要告诉angular这个外部脚本应该包括在内并且可用。 See docs

我的模板（mygraph.component.html）看起来有点不同：

<div #graphContainer
     style="overflow:hidden;width:100%;height:100%; padding: 10px;">
</div>

[您看，Angular使用'＃'-符号作为模板引用！

这里是我的“ mygraph.component.ts”：

import 'mxgraph/javascript/mxClient.js';

/**
* externally (in mxClient) defined vars
*/
declare var mxClient: any;
declare var mxUtils: any;
declare var mxRubberband: any;
declare var mxGraph: any;
declare var mxConstants: any;
declare var mxPerimeter: any;
declare var mxEdgeStyle: any;

@Component({
  selector: 'app-graph',
  templateUrl: './graph.component.html',
  styleUrls: ['./graph.component.scss']
})
export class GraphComponent {

  @ViewChild('graphContainer', { static: true }) graphContainer: Element;

  constructor(private http: HttpClient) {}

  // This I'm calling in my custom logic
  private draw() {
   // Checks if the browser is supported
    if (!mxClient.isBrowserSupported()) {
        mxUtils.error('Browser is not supported!', 200, false);
    } else {
        // Creates the graph inside the given container
        this.graphContainer['nativeElement'].innerHTML = '';
        const graph = new mxGraph(this.graphContainer['nativeElement']);

        // Get and clone style, just for demonstration
        let style = graph.getStylesheet().getDefaultVertexStyle();
        let style2 = mxUtils.clone(style);
        graph.getStylesheet().putCellStyle('myStyle', style2);

        // Gets the default parent for inserting new cells. This
        // is normally the first child of the root (ie. layer 0).
        const defaultParent = graph.getDefaultParent();

        // Adds cells to the model in a single step
        graph.getModel().beginUpdate();

        try {
          // Do some drawing
          // graph.insertVertex(...
          // graph.insertEdge(...
        } finally {
          // Updates the display
          graph.getModel().endUpdate();

          // Make Graph not changeable by User
          graph.setEnabled(false);
        }            
    }
  }
}

虽然这不是一个完整的示例（我刚刚从代码中获取了一些有趣的内容），但它应该可以帮助您进行设置和启动。有关实际图形，请参考MxGraph文档。