CODEWITHSUNDEEP
angulartypescriptionic2ionic3
tjohnson05
tjohnson05

Reputation: 11

Angular2/Ionic2 - prevent controller reload on navigation

So I had first done a version of my app that used tabs. Using tabs, when I would navigate to a page, the view would initiate the one first time (pull data from api and display it) and when I would navigate away from it and come back, nothing would have to reload, it was basically left the way it was because the controller didn't run again.

I've since implemented the Ionic2 side menu starter and it seems to be set up fine. But for example when navigate to my podcast page and play a track, when I navigate away, the track continues to play (this is fine by me). However, when I navigate again to the podcast page, its like a whole new instance of it: the track showing as not playing, the progress bar at start, and I'm then able to press play again and two instances of that track play at the same time. Basically the whole controller fires up a new instance. So this means also that my HTTP get requests are being made every time I navigate to the page (which is less of an issue I suppose if I set up some sort of caching for that, but my primary annoyance is the podcast progress/state issue).

Any tips or advice here?

Thanks!

Upvotes: 1

Views: 383

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

Generally speaking, I would use a shared service to avoid that from happening. By using a service and including it in the providers array of the App component we can store there some information and it will be available in the entire application (it will be a singleton)

But lets do this step by step:

But for example when navigate to my podcast page and play a track, when I navigate away, the track continues to play (this is fine by me).

In this case, you can use the didLeave() method, so you can stop the track. You can find further information about that method here. I'd not only stop the track, but also store in our shared service (for instance) the current point of time of the track you were listening and probably the id of the song you were listening too.

However, when I navigate again to the podcast page, its like a whole new instance of it: the track showing as not playing, the progress bar at start, and I'm then able to press play again and two instances of that track play at the same time. Basically the whole controller fires up a new instance.

So if you go back to that page again, you can use the willEnter() method to check if the id of the song is the same you were listening before and if it's the same, you can use the stored information to set the podcast state (maybe set the progress bar with the value you stored, show a pause button instead of the play button, and so on).

So this means also that my HTTP get requests are being made every time I navigate to the page (which is less of an issue I suppose if I set up some sort of caching for that, but my primary annoyance is the podcast progress/state issue).

You could also reduce the amount of http requests made by using the Id of the song. If the podcast that you want to listen now is the same that the previous one you were listening, maybe you can avoid doing the http request.

Apologies if some of those items make no sense in the context of your applications, they're just some ideas that may help you fixing those issues.

Upvotes: 1

Related Questions