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

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

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

我的 package.json 中有一个正常依赖项： "mxgraph": "^3.9.12",

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

{
   "projects": {
      "architect": {
        "build": {
          "options": {
              "assets": [
                    { "glob": "**/*", "input": "src/assets/", "output": "/assets/" },
                    { "glob": "favicon.png", "input": "src/", "output": "/" },
                    { "glob": "**/*", "input": "./node_modules/mxgraph/javascript/src", "output": "/assets/mxgraph" }
        ]
              "scripts": [
                    "node_modules/mxgraph/javascript/mxClient.js"
              ]}
        }
      }
    }
}

注意： 我只包含了相关部分。 我需要告诉 angular，这个外部脚本应该被包含并可用。 查看文档

我的模板 (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 mxConstants: any;
declare var mxPerimeter: any;
declare var mxEdgeStyle: any;

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

@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 mx.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 文档。

我也找不到与此相关的任何资源。所以我自己做了几个 npm 包。你可以尝试在你的 Angular 项目中使用其中一个包。这些只是原始 mxgraph 库的 typescript 包装器。

https://www.npmjs.com/package/ts-mxgraph

https://www.npmjs.com/package/ts-mxgraph-factory

https://www.npmjs.com/package/ts-mxgraph-typings

我在项目中使用了以下方法。我在项目内部创建了 mxgraph.overrides.ts 文件并导入了 mxgraph 原型。您还可以扩展库的原始方法。

import '../../assets/deflate/base64.js'
import '../../assets/deflate/pako.min.js';

import { mxgraph, mxgraphFactory } from "ts-mxgraph";
const mx = mxgraphFactory({
    mxBasePath: 'mxgraph',
    mxLoadResources: false,
    mxLoadStylesheets: false,
});

declare const Base64: any;
declare const pako: any;

let mxActor: any = mx.mxActor;
let mxArrow: any = mx.mxArrow;
let mxArrowConnector: any = mx.mxArrowConnector;
let mxGraph: any = mx.mxGraph;
let mxClient: any = mx.mxClient;
let mxUtils: any = mx.mxUtils;
...
// extends mxgraph prototypes
mxGraph.prototype.updatePageBreaks = function(visible, width, height) {
...
}
// Adds panning for the grid with no page view and disabled scrollbars
const mxGraphPanGraph = mxGraph.prototype.panGraph;
mxGraph.prototype.panGraph = function(dx, dy) {
    mxGraphPanGraph.apply(this, arguments);
    ...
}
...

export {
    mxClient,
    mxUtils,
    mxGraph,
    ...
}

// and then import these where you want to use them

import {
    mxClient,
    mxUtils,
    mxGraph,
    mxGraphModel,
    mxGeometry,
    mxConstants,
    mxCell,
    mxDictionary,
    mxCellEditor,
    mxStyleRegistry
} from './mxgraph.overrides';

import { IMAGE_PATH, STYLE_PATH, STENCIL_PATH, urlParams } from '../config';

declare var Base64: any;
declare var pako: any;

export class Graph extends mxGraph {
...
}