Angular：防止 DomSanizer 更新 DOM 事件

Question

我遇到了DomSanitizer 的问题。

我创建了一个StackBlitz 来复制这个问题。

每次单击按钮时，都会重新加载 iframe A。该按钮完全没有任何作用 - 因此它与 iframe 无关。

iframe A 对其源具有动态引用。为了完成这项工作，我使用了DomSanitizer。

iframe B 有一个静态引用，这里没有重新加载 - 这是我的预期。 只是为了表明它与消毒剂有关。

所以我需要在我的应用程序中有一个 iframe，它的内容应该取决于应用程序的状态（一些输入）。如果情况发生变化，那么重新加载就可以了。

但我不能接受每次单击与 iframe 无关的按钮时重新加载。

我该如何处理？感谢支持！

Answer 1

问题：

问题是因为你在数据绑定语法中使用了method，这里：

<iframe 
  [src]="getURL()" 
  width="100%" 
  height="100px">
</iframe>

因此，每次 Angular 执行变更检测时，getURL 都会被调用。

解决办法：

您可以创建一个Pipe 来清理iframe src 网址。我在this answer 中做过类似的事情。

这样，您的iframe 不会在每次 Angular 执行变更检测时重新加载。

这里有一个Working Sample StackBlitz 供您参考。