Unsubscribe to observable when navigating away from an onsen ui page

Question

I have an angular 2+ app running onsen ui, I have setup some components as pages and I am using the ons-navigator to switch between them.

The problem im having is that when im subscribed to an observable in an ons-page and the user navigates away from that page, The observable is still active. It seems like ngOndestroy doesnt get called when changing pages using the onsen navigator.

Im wondering how can I resolve this?

heres some code:

import { Component, OnDestroy, OnInit } from '@angular/core';
import { OnsNavigator } from 'ngx-onsenui';
import { HomePageComponent } from '../home-page/home-page.component';
import { CommonDataService } from '../_services/common-data.service';
import { MenuService } from '../_services/menu.service';
import { UserService } from '../_services/user.service';

@Component({
  selector: 'ons-page',
  templateUrl: './login-page.component.html',
  styleUrls: ['./login-page.component.scss']
})
export class LoginPageComponent implements OnInit {

  constructor(
    private menuService: MenuService,
    private commonDataService: CommonDataService,
    private _navigator: OnsNavigator,
    private userService: UserService) { }
  

  ngOnInit() {
    this.menuService.changePage$.subscribe((page) => {
      this._navigator.element.pushPage(page, {data: {hoge: "fuga"}});
    });
  }

  ngOnDestroy(): void {
    //doesnt work
    console.log('on destroy called.');
  }

}

Note sure about onsen-ui, but for that to unsubscribe, you would need to maintain a reference to the subscription and dispose it: `this.subscriptions.push(this.menuService.changePage$.subscribe(...));` and in `ngOnDestroy`: `this.subscriptions.forEach(subscription => subscription.unsubscribe());` — Aluan Haddad, Sep 20 '20 at 03:30
@AluanHaddad true but this doesn't really solve the issue of ngOnDestroy not being called — Kevin Shiflett, Sep 20 '20 at 03:43
[link](https://stackoverflow.com/a/63975367/13864358) @Kevin Shiflett and , please refer this — Thakur Amit, Sep 20 '20 at 03:52
Can you share also the html component we are you setting de login selector? — Ztemps, Sep 20 '20 at 18:25

score 1 · Answer 1 · answered Sep 20 '20 at 04:18

This seems to be normal behavior for OnsNavigator. If you want to unsubscribe from the observable after the page is pushed you can do this after the promise pushPage. Piggy-backing off of Thakur's answer it would look like this.

export class LoginPageComponent implements OnInit  {
  subscription: Subscription;

  constructor(
    private menuService: MenuService,
    private commonDataService: CommonDataService,
    private _navigator: OnsNavigator,
    private userService: UserService) { }
  

  ngOnInit() {
    this.subscription = this.menuService.changePage$;
    this.subscription.subscribe((page) => {
      this._navigator.element.pushPage(page, {data: {hoge: "fuga"}})
         .then(() => this.subscription.unsubscribe());
    });
  }

}

score 0 · Answer 2 · answered Sep 20 '20 at 04:49

If the component will not be destroyed then you may have to consider a different approach like subscribing to router changes and unsubscribe to your subscribers.
Reference Link

constructor(private router: Router) {
    router.changes.subscribe((val) => {
     /*Here console log the value you find something useful to add some logic
      to unsubscribe to your observers instead of ngOndestroy hook.*/
    })
  }

Hope this helps, Happy Coding

i dont think ons-navigator uses the normal angular routing – SanzioSan Oct 16 '20 at 12:32 — SanzioSan, Oct 16 '20 at 12:32

Unsubscribe to observable when navigating away from an onsen ui page

2 Answers2