javascript - 有什么方法可以监听 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 。

(渲染后)调用的最后一个钩子(Hook)是 ngAfterViewChecked，但也许您不一定需要这个钩子(Hook)(使用它可能会影响应用程序的性能，因为它经常被调用)。

这是另一个解释不同钩子(Hook)及其用途的链接:https://guide.freecodecamp.org/angular/lifecycle-hooks/