I am facing an issue with my Angular 2+ app that utilizes Onsen UI. I have set up some components as pages and I am using the ons-navigator to switch between them.
The problem arises when I subscribe to an observable in an ons-page and the user navigates away from that page. The observable remains active even though it seems like ngOnDestroy is not being called when changing pages using the onsen navigator.
I am searching for a solution to this problem. Any ideas?
Here's a snippet of the 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 {
//not working
console.log('on destroy called.');
}
}