“节点上的点击事件”是否适用于有角度的美人鱼 js？答案

【问题标题】：Is "click event on node" works with Mermaid js in angular?“节点上的点击事件”是否适用于有角度的美人鱼 js？
【发布时间】：2021-01-13 09:22:25
【问题描述】：

我正在尝试将美人鱼流程图绘制 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 mermaid

【解决方案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");

});

}

【讨论】：