Angular - 在 iF​​rame 中更改 [src] 时如何调用 ngOnDestroy

Question

I have one slide show application that support only many internal link.

HTML

<iframe width="100%" id="iframeSlide" height="100%" #iframe frameBorder="0" [src]="urlSafe"></iframe>

TS code

current.urlSafe = current.sanitizer.bypassSecurityTrustResourceUrl(current.slideUrls[current.index]);

slideUrls is an array contains list of internal link, but when new url set to current.urlSafe , the old url did not call ngOnDestroy function to release resource.

I tried to set current.urlSafe = "about:blank";

or

var frame = document.getElementById("iframeSlide"),
frameDoc = frame.contentDocument || frame.contentWindow.document;
frameDoc.removeChild(frameDoc.documentElement);

But it did not call ngOnDestroy function. In the internal page, I used setInterval function so need go to ngOnDestroy to clear the Interval , without it many request to called inside setInterval .

Links I refereed

https://web.dev/detached-window-memory-leaks/

How do I clear all intervals?

Answer 1

Changing the iframe src would be the equivalent to navigating to a new url in the browser address bar. The browser itself clears the top level JS/HTML resources in this case

ngOnDestroy would occur if you remove components or services within the app, but not on a refresh