Angular - I need avoid the destroy of the component

Question

I have a component with an <iframe> element inside.

This component is called for a route.

When the component is called, the <iframe> element reloads the content, but I need load this content only once. For this, I will need to cancel the destroy of this component.

I tried moving this <iframe> to <body> element when the onDestroy is called and reuse this when this component is called again, but when you move an <iframe> to another parent, his content is reloaded.

Does someone have an idea of how do this?

Try this one https://stackoverflow.com/questions/48514644/is-there-any-way-to-prevent-destroying-a-component-in-angular — Suryan, Oct 25 '18 at 13:04
You're not forced to keep your component : what you're forced to keep is your `iframe`. Components that aren't used need to be destroyed. Simply load your iframe in a global variable (or in a service) and fetch it with your component on load. — , Oct 25 '18 at 13:15
@Suryan: The CanDeactivate can´t help me, because I need change the screens when I change the route. — Sandro Santos, Oct 25 '18 at 13:24
@trichetriche - I know, but if I change the father of `` element, the `<iframe>` will be load again. — Sandro Santos, Oct 25 '18 at 13:26
It's not supposed to have a "father" to start with ... Your `iframe` should be created with full JS and stored in a variable, that was my point — , Oct 25 '18 at 13:28
@trichetriche - I understand your point, but when you put the element `` inside of a new element, your content will be reload. — Sandro Santos, Oct 25 '18 at 13:47
Are you sure about that ? You could use `appendChild` and `removeChild` and keep the variable up, I'm not sure it reloads the frame ... (but I'm far from being an expert on that matter) — , Oct 25 '18 at 14:08
@trichetriche - I'm far from an expert on that matter too kkk .. Well, I'm tested this and the reaction of the component was this. — Sandro Santos, Oct 25 '18 at 14:18

score 3 · Answer 1 · answered Oct 25 '18 at 17:19

3

I believe what you are looking for would be the RouteReuseStrategy.

Instead of destroying + re-creating components on consequent visits, you can re-use your routes.

See this answer for the implementation.

answered Oct 25 '18 at 17:19

Uğur Dinç

2,415
1
18
25

Thanks, but this strategy dont solve this problem with the iframe element. I tried too. – Sandro Santos Oct 25 '18 at 18:30

score 2 · Accepted Answer · answered Oct 29 '18 at 17:34

I solved my problem!

I created a component with position: fixed, one level up of router-outlet component.

When the user go in of the route, the ngAfterViewInit will be call the fixed component to show the iframe.

When the user go out of the route, the OnDestroy will be call the method to hide the iframe.

Angular - I need avoid the destroy of the component

2 Answers2