Angular: Prevent DomSanizer from updating on DOM Events

谁都会走 提交于 2020-01-16 16:54:10

问题


I'm facing an issue with DomSanitizer.

I've created a StackBlitz that replicate this issue.

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 has a dynamic reference to its source. To make this work I use the DomSanitizer.

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

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.

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!


回答1:


The Problem:

The problem is caused because you've used a method in the data-binding syntax, here:

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

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

The solution:

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

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

Here's a Working Sample StackBlitz for your ref.



来源:https://stackoverflow.com/questions/57061746/angular-prevent-domsanizer-from-updating-on-dom-events

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!