angular - Typescript 上的 Drawflow 库

Question

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

很棒的用户，@BobBDE 在这里为这个库定义了打字稿：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 元素的所有详细信息，因此它不是未定义的。您会在这篇文章中找到作为屏幕截图加入的控制台屏幕截图。

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

提前致谢！

在此处输入图像描述

标签： angulartypescriptnpmundefinedprimeng

Answer 1

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

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