“节点上的点击事件”是否可以与 Angular 中的 Mermaid js 一起使用？

Question

我正在尝试将 Mermaid 流程图绘制 Javascript 集成到我基于 Angular 9 的客户端应用程序中。我能够绘制流程图，但我确实需要在特定节点上提供带有 Typescript（组件文件）中定义的函数的单击事件。 有人可以举例说明如何解决这个问题吗？

这是我的代码 html：

TS：

@ViewChild('mermaid', { static: true }) mermaid: ElementRef;

  ngAfterViewInit () {
    mermaid.initialize(this.config);
    const element: any = this.mermaid.nativeElement;
    const graphDefinition = `graph TD\nA[Christmas] -->|Get money| B(Go shopping)\nB --> C(Let me think)\nC -->|One| D[Laptop]\nC -->|Two| E[iPhone]\nC -->|Three| F[fa:fa-car Car]\nA[Christmas] -->|Get money| D[Laptop]\nB --> E \nclick A CustomFunction`;

    let _local = this;
    var insertSvg = function(svgCode, bindFunctions){
      element.innerHTML = svgCode;
      bindFunctions(element);
};
var id = 'theGraph';
mermaid.render(id,graphDefinition,insertSvg, element);
}

CustomFunction = function() {
     alert("Hello World");
 };

谢谢，

我在 Angular 7 上解决了这个问题，但方法很糟糕。我将使用正确的代码方法直到解决此问题。

我添加了单击事件此代码“单击 a1 调用 sessionStorage.setItem(ClickedNode,a1)”，并且我使用此代码在运行时读取了 sessionStorage：

ngOnInit() {

setInterval(() => {

    let nodeId = sessionStorage.getItem("ClickedNode");

    if (nodeId) {

       if (nodeId == "a1") {

           // Todos

       }

    }

    sessionStorage.removeItem("ClickedNode");

});

}

这就是我解决这个问题的方法。

• 添加点击处理程序（mermaidFunction）
• 在点击处理程序中将其变成自定义事件
• 在组件中监听此事件

将点击处理程序添加到polyfills.ts

(window as any).mermaidFunction = function (node: string, componentId: string) {
    const event = new CustomEvent("mermaid-click", {
        bubbles: true,
        detail: { node, componentId: Number(componentId) },
    });
    window.dispatchEvent(event);
}

在 Mermaid 组件中监听事件并执行所需的工作。

  @HostListener('window:mermaid-click', ['$event'])
  mermaidClick(e: CustomEvent) {
   ....
  }

如果你同时有不止一张美人鱼图，你就必须处理它。

Answer 1

我在 Angular 7 上解决了这个问题，但方法很糟糕。我将使用正确的代码方法直到解决此问题。

我添加了单击事件此代码“单击 a1 调用 sessionStorage.setItem(ClickedNode,a1)”，并且我使用此代码在运行时读取了 sessionStorage：

ngOnInit() {

setInterval(() => {

    let nodeId = sessionStorage.getItem("ClickedNode");

    if (nodeId) {

       if (nodeId == "a1") {

           // Todos

       }

    }

    sessionStorage.removeItem("ClickedNode");

});

}

Answer 2

这就是我解决这个问题的方法。

• 添加点击处理程序（mermaidFunction）
• 在点击处理程序中将其变成自定义事件
• 在组件中监听此事件

将点击处理程序添加到polyfills.ts

(window as any).mermaidFunction = function (node: string, componentId: string) {
    const event = new CustomEvent("mermaid-click", {
        bubbles: true,
        detail: { node, componentId: Number(componentId) },
    });
    window.dispatchEvent(event);
}

在 Mermaid 组件中监听事件并执行所需的工作。

  @HostListener('window:mermaid-click', ['$event'])
  mermaidClick(e: CustomEvent) {
   ....
  }

如果你同时有不止一张美人鱼图，你就必须处理它。