从iframe事件侦听器触发时，Angular UI更改不起作用

亚历杭德罗·冈萨雷斯（Alejandro Gonzalez）

我目前正在使用Angular 8应用程序，该应用程序充当iframe顶部的UI层，用于向用户显示增强的信息。Angular应用程序将根据iframe中触发的事件显示不同的角度分量：

显示用户在iframe中右键单击的工具提示（角度组件）
当用户单击iframe的特定部分时，更改组件的UI属性
...

我当前面临的问题是，Angular显示/更新UI中的更改，但在30秒后，有时甚至忽略了UI更新，并且更改在UI中不可见。

但是，如果我只运行确切的代码，但使用Angular按钮click事件作为事件的触发器，则一切正常。

以下是有关如何创建来自iframe的事件的侦听器的代码段：

this.iframe = document.getElementById('iframe') as any;
let canv = this.iframe.contentDocument.getElementById('canv');
canv.addEventListener('contextmenu', (event) => this.onContextMenuEvent(event))

作为代码的一部分，onContextMenuEvent我只是计算一些坐标以定位工具提示，然后使用布尔标志启用组件。以下是在内如何引用工具提示组件app.component.html：

<app-tooltip *ngIf="isTooltipShown"
  [offsetX]="tooltipOffsetX"
  [offsetY]="tooltipOffsetY"
</app-tooltip>

如前所述，如果onContextMenuEvent从Angular UI元素触发的代码，则不会发生此问题。

提示一下，问题出现时的堆栈跟踪非常短，只有两行：

eevOnContextMenuEvent (app.component.ts:597)
(anonymous)(app.component.ts:394)

而另一种情况相当长，中间有很多Angular调用：

fakeTooltip (app.component.ts:566)
(anonymous) (app.component.ngfactory.js.pre-build-optimizer.js:68)
handleEvent (core.js.pre-build-optimizer.js:43993)
callWithDebugContext (core.js.pre-build-optimizer.js:45632)
debugHandleEvent (core.js.pre-build-optimizer.js:45247)
dispatchEvent (core.js.pre-build-optimizer.js:29804)
(anonymous) (core.js.pre-build-optimizer.js:31837)
schedulerFn (core.js.pre-build-optimizer.js:35379)
__tryOrUnsub (Subscriber.js.pre-build-optimizer.js:185)
next (Subscriber.js.pre-build-optimizer.js:124)
_next (Subscriber.js.pre-build-optimizer.js:72)
next (Subscriber.js.pre-build-optimizer.js:49)
next (Subject.js.pre-build-optimizer.js:39)
emit (core.js.pre-build-optimizer.js:35298)
resetSchematics (hideable-panel.component.ts:230)
(anonymous) (hideable-panel.component.ngfactory.js.pre-build-optimizer.js:50)
handleEvent (core.js.pre-build-optimizer.js:43993)
callWithDebugContext (core.js.pre-build-optimizer.js:45632)
debugHandleEvent (core.js.pre-build-optimizer.js:45247)
dispatchEvent (core.js.pre-build-optimizer.js:29804)
(anonymous) (core.js.pre-build-optimizer.js:42925)
(anonymous) (platform-browser.js.pre-build-optimizer.js:2668)
invokeTask (zone-evergreen.js.pre-build-optimizer.js:391)
onInvokeTask (core.js.pre-build-optimizer.js:39680)
invokeTask (zone-evergreen.js.pre-build-optimizer.js:390)
runTask (zone-evergreen.js.pre-build-optimizer.js:168)
invokeTask (zone-evergreen.js.pre-build-optimizer.js:465)
invokeTask (zone-evergreen.js.pre-build-optimizer.js:1603)
globalZoneAwareCallback (zone-evergreen.js.pre-build-optimizer.js:1629)

关于如何解决此问题的任何提示？

提前致谢。

编辑1：根据注释的要求，我分享了部分代码onContextMenuEvent（不幸的是，我无法分享实际的代码）：

onContextMenuEvent(mouseEvent: any): void {
   var param = this.getEventParameters(mouseEvent);
   this.tooltipOffsetX = param.x;
   this.tooltipOffsetY = param.y;
...
   this.isTooltipShown = true;
}

另一个提示是，ngOnChanges工具提示组件上的方法不是立即调用，而是在超过30秒后被调用（这不是常数）。

用户名

Angular可能会以某种方式失去其“区域”。

尝试使用以下命令在构造器中导入区域

constructor(
     private zone: NgZone
) { ... }

并onContextMenuEvent在区域内运行：

onContextMenuEvent(mouseEvent: any): void {
   this.zone.run(() => {
         var param = this.getEventParameters(mouseEvent);
         this.tooltipOffsetX = param.x;
         this.tooltipOffsetY = param.y;
         ...
         this.isTooltipShown = true;
   })
}

可能足以包裹this.isTooltipShown = true;区域内部

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。