Javascript 使用Angular重写MxGraph上的graphHandlerMouseUp时的无限循环

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

我有一个角度组件显示和MxGraph。我能够通过这个链接（）将MxGraph与Angular集成。即使我使用Angular 7，解决方案仍然有效

图形在页面上正确显示，一切正常，包括我对函数graphHandlerMouseUp的重写，我使用以下代码执行此操作：

//释放按钮时保存鼠标位置：用于
//在拖放中检测目标
mx.graphHandlerMouseUp=mx.mxGraphHandler.prototype.mouseUp；
mx.mxGraphHandler.prototype.mouseUp=函数（图形，evt）{
currentdropX=evt.graphX；
currentdropY=evt.Graphics；
apply（这是参数）；
}

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

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

在我看来，这似乎是一个资源问题，当我将控制台输出放在如下位置时：

//释放按钮时保存鼠标位置：用于
//在拖放中检测目标
mx.graphHandlerMouseUp=mx.mxGraphHandler.prototype.mouseUp；
mx.mxGraphHandler.prototype.mouseUp=函数（图形，evt）{
currentdropX=evt.graphX；
currentdropY=evt.Graphics；
//这里有一个圈
控制台日志（“测试”）；
apply（这是参数）；
}

“测试”被写了很多次，并且不断增长。但是，如果我理解的话，这是重写函数的正确方法。当然，在页面的第一次加载时，“Test”显示一次。传递到另一个组件，然后返回到这个组件，它会显示“无限”次（直到我达到：“ERROR RangeError:Maximum call stack size excelled”）

我还试图删除这个覆盖，除了明显缺乏功能外，同样的问题也发生在函数“mxDragSource”上，它是用同样的方法覆盖的

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

---

谢谢

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

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

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

怎么做？

---

您可以创建一个mixin并在您的组件中使用此mixin b/如果您不知道它是什么以及如何操作，请在a中重现您的问题，我很乐意帮助您实现它。

感谢您花时间回复！是的，我理解问题产生的原因，奇怪的是，我可以避免第二次重新定义，只要看看“mx.graphHandlerMouseUp”是否已经定义，它是否适用于这个特定的函数，但我对同一个库的其他函数（例如DragSource）没有那么幸运。我曾研究过混合，但您提出的第一个解决方案可能是最好的。但我认为我仍然不了解mx库在整个组件路由中的生命周期。。。我希望这个组件在离开页面时被“销毁”…组件确实被销毁了，但是库被缓存了。这就是覆盖通过组件导航持久化的原因。很抱歉，我可以在没有更多代码的情况下在实现方面提供更多帮助！谢谢Florian，你已经帮了大忙，现在问题已经解决了。。。如果这不是问题的话，我还有最后一个问题。。。如何强制重新加载库以避免使用缓存版本？我这样问是因为现在不需要这样做，但在未来的版本中，第一个组件也需要一个版本的MXGraph库，在这里我将重写函数。很可能是相同的功能，但不一定是所有功能，也不一定只有这些功能。。。再次感谢@Marco如果只需要重写一个组件中的库函数，并且该组件在任何视图中都不重复，则可以使用。销毁组件时，将重新指定先前已重写的库方法