有什么方法可以在 angular 中监听更改检测完成事件

Question

我有一个包含 iframe 的组件，但仅在 http 调用后可见 (*ngif)。

<iframe id="myFrame" [src]="url | sanitizeUrl" *ngIf="showIFrame "></iframe>

这是启用showIFrame 属性.

的getData方法

this.getData().subscribe(
  (_response: string) => {
     this.showIFrame = true;
     setTimeout(() => {
         this._listenClickOnIframe();
     }, 100);
});

基于showIFrame iframe 可见。

我有另一种方法 _listenClickOnIframe 可以将 onclick 事件添加到 iFrame。此方法在 setTimeout 和 100ms 等待。如果我不使用 setTimeout，_listenClickOnIframe 方法会在 DOM 更改之前执行，并且 DOM 上没有 iFrame。

有没有其他方法可以解决这个问题？对于一些慢速机器 100ms（随机毫秒数）可能不够，我认为这不是一个好方法。

我正在寻找某种变化检测完成事件，有什么办法或更好的方法来解决这种情况吗？

Answer 1

您应该监听 iframe 的 load 事件，然后才开始监听：

<iframe id="myFrame" [src]="url | sanitizeUrl" *ngIf="showIFrame" (load)="_listenClickOnIframe()"></iframe>

LE:

对于一般的 angular 生命周期实践，我建议阅读此处的文档：https://angular.io/guide/lifecycle-hooks。

调用的最后一个钩子（在呈现之后）是 ngAfterViewChecked 但也许您不一定需要这个（使用它可能会影响您的应用程序的性能，因为它经常被调用）。

这是另一个 link 解释不同的钩子及其用途：https://guide.freecodecamp.org/angular/lifecycle-hooks/

有什么方法可以在 angular 中监听更改检测完成事件

is there any way to listen change detection completed event in angular

javascript

optimization

angular

angular-changedetection