How should I handle Observable.Subscribe/unSubscribe and navigation?

Ionic Framework ionic-v3
1

Hi,

I am coming from Angular 4 and I am trying to undertand navigation with ionic.

On Angular if I go from comp A to B, all variables within the A comp will be detroyed unless I have a dedicated service to store data. I don’t need to unsubscribe any observable.

My aim is to go from a menuPage => componentPage then back =>menuPage…

myComponentPage has a timerService:

 this._timer = new BehaviorSubject({
            event: "pause",
            timer: this.config
        })

[...]
 startTimer() {
        this._timerState = setInterval(() => {
            this._timer.next({
                event: "continue",
                timer: this._seconds - 1
            })
        }, 1000)
    }

In Ionic I have tried push(componentPage) the .pop(), setRoot(componentPage) then setRoot(menuPage) …etc… I have noticed that components from my B component that have subscribed my _timer are still active… Should I unsubscribe manually ?? So it means that the view is still there somewhere ??

Secondary question :
Also, why navController service in Ionic examples and injected as public whereas Angular’s good practice says to be private ?

2

Yes. Pretend ngOnDestroy does not exist, because it kinda doesn’t. Unsubscribe when you leave pages, and subscribe when you re-enter pages, using Ionic life cycle hooks.

import { Subscription } from 'rxjs/Subscription';

private _someListener: Subscription = new Subscription();

ionViewWillEnter() {
this._someListener = interestingStream.subscribe();
}

ionViewWillLeave() {
this._someListener.unsubscribe();
}

For example. Might need to tweak this depending on your page.

Edited to add: I keep “long-term” Observables in global providers, with getters to the streams through the providers. Then a page can easily subscribe or unsubscribe – or just get a snapshot – using the provider’s copy.

1 Like
3

Ok thanks.

So can I assume :

1/ push(), setRoot() and all other methods of the navControler service doesn’t change anything in term of performance but it is just a way the navigation is organized (what page is reach if I press the backbutton…etc) ?

2/ Any components that are created once (componentPage in my example) stay “alive” untill the app is killed ? So if I navController.push() 100 componentPage, I ll have somewhere 1000 living instance of this component ?

Thanks.

4

When a page is popped off the nav stack, it is slated to be destroyed. But that might not happen instantly. So forcing your Observables to unsubscribe when a page is popped is a way to avoid race conditions where a new Observable looks for something an old Observable has not let go of yet.

That’s my understanding, yes. Pages are guaranteed to persist until they are popped.

5

Another point: If you follow the Angular Style Guide, and put logic in a provider and only rendering information in a component, then in your example, you’ll have 100 copies of the directions to the DOM, but only 1 copy of the (usually more expensive) logic.

6

Ok. But it seems weird. Because I subscribe in service too… So I don’t really know when I leave page…