Typescript 上的 Drawflow 库

Question

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

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

我的项目使用 PrimeNg angular 11 和打字稿 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 元素的所有详细信息，因此它不是未定义的。您会在 post.

上找到作为屏幕截图加入的控制台屏幕截图

提前谢谢你，希望这里有人有解决方案。

提前致谢！

enter image description here

Answer 1

您可能需要在创建编辑器时传递 nativeElement：

const editor = new drawflow(this.drawflowDiv.nativeElement);

Answer 2

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

指令文件：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 { }

Typescript 上的 Drawflow 库

Drawflow library on Typescript

undefined

npm

typescript

primeng

angular