Typescript 上的 Drawflow 库

我目前正在尝试实现 @Jerosoler 制作的很棒的 Drawflow 库（在这里找到：https://github.com/jerosoler/Drawflow https://github.com/jerosoler/Drawflow）在我的 PrimeNg 项目中。

很棒的用户，@BobBDE 在这里为这个库做了打字稿定义：https://www.npmjs.com/package/@types/drawflow https://www.npmjs.com/package/@types/drawflow

我的项目使用 PrimeNg 与 Angular 11 和 TypeScript 4。

我使用了 2 个 npm 命令来安装库和定义。一切看起来都很棒。我绝对可以找到 JS 库和定义，并在 Typescript 中使用它们。

但是，我有一个未定义的错误，我正在努力找出我做错了什么......

在我的组件 html 中，我有以下内容：

<div #drawflowDiv></div>

检索我的组件打字稿中的 div：

@ViewChild('drawflowDiv', {static: true}) 
drawflowDiv: HTMLElement;

然后在我的 ngOnInit 中我有以下内容：

ngOnInit(): void {
    console.log(this.drawflowDiv);
    const editor = new drawflow(this.drawflowDiv);
    editor.reroute = true;
    editor.editor_mode = 'edit';
    editor.drawflow = {.....}; // Default example json for the library
    editor.start();
  }

我的代码中没有任何错误，drawflow 库已正确链接。 console.log 为我提供了 div html 元素的所有详细信息，因此它不是未定义的。 您会在这篇文章中找到作为屏幕截图加入的控制台屏幕截图。

预先感谢您，希望这里有人能找到解决方案。

提前致谢！

在此输入图像描述 https://i.stack.imgur.com/0sQ16.png

为了使代码可重用，您还可以将所有内容封装在指令中：

指令文件：ng-draw-flow.directive.ts

import { Directive, ElementRef, OnInit } from '@angular/core';
import Drawflow from 'drawflow';

@Directive({
  selector: '[appNgDrawFlow]'
})
export class NgDrawFlowDirective implements OnInit {

  editor: Drawflow;

  constructor(private hostElRef: ElementRef) { }

  ngOnInit() {
    if (!!this.hostElRef?.nativeElement) {
      const { nativeElement } = this.hostElRef;
      this.initDrawFlow(nativeElement);
    }
  }

  private initDrawFlow(el: HTMLElement): void {
    try {
      if (!!el) {
        this.editor = new Drawflow(el);
        this.editor.reroute = true;
        this.editor.editor_mode = 'edit';
        // this.editor.drawflow = {}
        this.editor.start();
      } else {
        console.error('Drawflow host element does not exist');
      }

    } catch (exception) {
      console.error('Unable to start Drawflow', exception);
    }
  }
}

请记住将 NgDrawFlowDirective 作为声明添加到父功能模块中 你在哪里使用它。

如何使用它的模板示例：

<div appNgDrawFlow></div>

如果您在运行它时遇到困难，请仔细检查您的模块声明条目。例如（应用程序模块的一部分）：

@NgModule(
  {declarations: [NgDrawFlowDirective]}
)
export class AppModule { }