Angular 中的绘制流程

Question

我一直在尝试在 Angular 中使用 Drawflow 库 (https://github.com/jerosoler/Drawflow)。

我正在使用这篇文章中的解决方案：Typescript 上的 Drawflow 库，但不幸的是，当我添加到我的 .html 组件时，它没有显示任何内容。有人知道可能出了什么问题吗？或者可以推荐我任何其他工具来在 Angular 中绘制流程图吗？

这是我的 .html 文件，我尝试在其中显示组件：

<div class="containercanvas" >
  <app-drawflow></app-drawflow>
</div>

这是我的drawflow.component.ts

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



@Component({
  selector: 'app-drawflow',
  templateUrl: './drawflow.component.html',
  styleUrls: ['./drawflow.component.css']
})
export class DrawflowComponent 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);
    }
  }


}

这是我的编辑器对象： https://gyazo.com/59a5d4910f93706757840118aee29034

Answer 1

据我了解，根据您所遵循的示例，您将指令的使用与组件的使用混淆了；

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



@Directive({
  selector: '[appNgDrawFlow]'
})
export class DrawflowDirective implements OnInit {
  editor: Drawflow | undefined;

  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);
    }
  }
}

并使用这样的指令：

<div class="containercanvas" appNgDrawFlow ></div>

Answer 2

未捕获的类型错误：无法在 HTMLDivElement.ondrop ((index):336:9) 的 drop ((index):128:9) 处的 addNodeToDrawFlow ((index):137:41) 处读取 null 属性（读取“clientWidth”）

我面临使用 Angular 的绘图流程问题，** 我使用 Angular **，当我拖入并拖出节点时，我收到此错误，任何人都可以告诉我我错在哪里，提前致谢，请检查下面附加的快照，谢谢