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

如何解决“节点上的点击事件”是否适用于美人鱼 js 的角度？

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

这是我的代码 html :

特：

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

谢谢，

1 个答案:

答案 0 :(得分：2)

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

我添加了点击事件这个代码“click a1 call sessionStorage.setItem(Clickednode,a1)”，我在运行时用这个代码读取了 sessionStorage：

ngOnInit() {

setInterval(() => {

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

    if (nodeId) {

       if (nodeId == "a1") {

           // Todos

       }

    }

    sessionStorage.removeItem("Clickednode");

});

}

解决方法

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

我添加了点击事件这个代码“click a1 call sessionStorage.setItem(ClickedNode,a1)”，我在运行时用这个代码读取了 sessionStorage：

ngOnInit() {

setInterval(() => {

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

    if (nodeId) {

       if (nodeId == "a1") {

           // Todos

       }

    }

    sessionStorage.removeItem("ClickedNode");

});

}