使用 Angular 在 MxGraph 上覆盖 graphHandlerMouseUp 时的无限循环

Question

我有一个难以解释的问题，就 Javascript、TrueType、Angular 和 MxGraph 方面的专业知识而言，我已经走出了自己的舒适区……希望能够解释一下。

我有一个 Angular 组件显示和 MxGraph。通过此链接 (How to integrate mxGraph with Angular 4?)，我能够将 MxGraph 与 Angular 集成。即使我使用 Angular 7，该解决方案仍然有效...

图形在页面上正确显示，一切正常，包括我使用以下代码执行的函数 graphHandlerMouseUp 的覆盖：

// Save the position of the mouse when releasing the button: used for
// detecting the target in a drag and drop
    mx.graphHandlerMouseUp = mx.mxGraphHandler.prototype.mouseUp;
    mx.mxGraphHandler.prototype.mouseUp = function( graph, evt  ) {
      currentdropX = evt.graphX;
      currentdropY = evt.graphY;
      mx.graphHandlerMouseUp.apply(this, arguments);
    }

当我第一次运行这个页面时，没有问题发生。

然后通过一个按钮，我调用一个带有另一个组件的页面（通过路由）。如果从这个页面我回到第一个组件（再次通过路由器链接）页面和带有 MxGraph 的组件正确加载，但是当我使用此功能时（即释放鼠标按钮）。

在我看来这是一个递归问题，就像我这样放置控制台输出时：

// Save the position of the mouse when releasing the button: used for
// detecting the target in a drag and drop
    mx.graphHandlerMouseUp = mx.mxGraphHandler.prototype.mouseUp;
    mx.mxGraphHandler.prototype.mouseUp = function( graph, evt  ) {
      currentdropX = evt.graphX;
      currentdropY = evt.graphY;
      // INIFINTE LOOP HERE
      console.log("Test");
      mx.graphHandlerMouseUp.apply(this, arguments);
    }

“测试”被多次编写，并且不断增长。但是，如果我理解的话，这是覆盖该功能的正确方法。当然，在第一次加载页面时，“测试”会显示一次。传递给另一个组件，然后返回它会显示“无限”次（直到我达到：“错误 RangeError：超出最大调用堆栈大小”）...

我也尝试删除该覆盖，除了明显缺乏功能外，同样的问题也发生在函数“mxDragSource”上，它被相同的方法覆盖。

正如我所说：我在 javascript、truetype、MxGraph 或 Angular 方面不够专业，所以任何提示，即使是显而易见的，都非常受欢迎！

谢谢！

Answer 1

第一次运行代码时，将 mx 库的 mouseUp 事件存储在一个变量中，并为 mouseUp 事件分配一个新函数，在该函数中调用旧的 mouseUpEvent。

第二次运行代码时，存储当前的 mouseUp 事件（已修改）并分配一个函数，在该函数中调用旧的 mouseUpEvent，这与您之前存储的相同。你的递归去了！

您需要做的是正确覆盖第三方函数，这样您就不会执行两次代码。

怎么做？

您可以创建一个 mixin 并在您的 componentB 中使用此 mixin/如果您不知道它是什么以及如何做，请在 stackblitz 中重现您的问题，我很乐意帮助您实现它.