Angular:阻止DomSanizer更新DOM事件 [英] Angular: Prevent DomSanizer from updating on DOM Events

问题描述

我遇到DomSanitizer的问题.

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

I've created a StackBlitz that replicate this issue.

每次单击按钮时，都会重新加载iframeA.该按钮完全不执行任何操作-因此它与iframe无关.

Every time the button is clicked, the iframe A is reloaded. The button does absolutely nothing - so it is not related to the iframe.

iframe A对其源具有动态引用.为此，我使用DomSanitizer.

iframe A has a dynamic reference to its source. To make this work I use the DomSanitizer.

iframe B具有静态参考，并且在这里没有重新加载-我期望什么. 只是为了表明它与消毒剂有关.

iframe B has a static reference and no reload here - whats I expected. Just to show it is related to the sanitizer.

因此，我需要在应用程序中添加一个iframe，其内容应取决于应用程序的状态(某些输入).如果那改变了，那么重新加载就可以了.

So I need to have an iframe in my application and its content should depend on the status of the application(some input). If that changes then a reload would be ok.

但是我无法接受与iframe没有任何连接的每次按钮单击.

But I can not accept a reload by every button-click that has no connection to the iframe.

我该如何处理?感谢您的支持！

How can I handle that? Thanks for the support!

推荐答案

问题:

此问题是由于您在数据绑定语法中使用了method引起的，

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

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

Because of this, every time Angular performs Change Detection, the getURL will get called.

您可以创建一个Pipe来清理iframe src网址.我在 此答案 中做了类似的事情.

You can create a Pipe to sanitize the iframe src url. I've done something similar in this answer.

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

That way, your iframe won't reload every time Angular performs Change Detection.

这是 工作样本StackBlitz 供您参考.

Here's a Working Sample StackBlitz for your ref.

这篇关于Angular:阻止DomSanizer更新DOM事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！