iframe 内容在 DOM 操作时重新加载 Angular

Question

我有一个 iframe，它会在满足特定条件时动态加载。

      <div *ngIf="iframeData">
        <iframe [src]="sanitizer.bypassSecurityTrustResourceUrl(iframeData.iFrameUrl)" name="paymetricIFrame"></iframe>
      </div>

我遇到的问题是，每当页面中的任何内容（框架外）发生变化（输入文本、select 值等）时，iFrame 内容都会重新加载，我可以看到包含的所有脚本在网络选项卡中重新加载，因此用户在 iframe 中填写的内容会消失。

我怀疑 ChangeDetectionStrategy，因为加载 iframe 文件的调用的发起者的堆栈跟踪返回到 viewRef._detectChanges，正如您从屏幕截图中看到的那样：

我尝试添加 ChangeDetectionStrategy.OnPush，但这在页面上造成了其他问题。

Answer 1

我通过创建一个仅包含 iframe 的新组件解决了这个问题。我仍然想知道为什么这解决了问题...

iframe 内容在 DOM 操作时重新加载 Angular

iframe content reloads when there is a DOM manipulation Angular

iframe

angular2-changedetection

angular