使用router.navigate在ionic 4中使用angular时，未调用构造函数或ngoninit

Question

i am using ionic 4 with angular i am navigating from home page to login when login status is false

this.router.navigateByUrl('/login');

and also from login page to home page after login

this.router.navigateByUrl('/home');

my router modile is

import { NgModule } from '@angular/core'; import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'home',
loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
},
{
path: 'list',
loadChildren: () => import('./list/list.module').then(m => m.ListPageModule)
},
{ path: 'acceptordermodalpage', loadChildren: './acceptordermodalpage/acceptordermodalpage.module#AcceptordermodalpagePageModule'},
{ path: 'newordermodalpage', loadChildren: './newordermodalpage/newordermodalpage.module#NewordermodalpagePageModule' },
{ path: 'rejectordermodalpage', loadChildren: './rejectordermodalpage/rejectordermodalpage.module#RejectordermodalpagePageModule' },
{ path: 'orderdetailsmodalpage', loadChildren: './orderdetailsmodalpage/orderdetailsmodalpage.module#OrderdetailsmodalpagePageModule' },
{ path: 'login', loadChildren: './login/login.module#LoginPageModule' }
];

@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}

now the problem is when i navigate from one page/component to another page/component the ngoninit or the constructor of destination page/component doesn't fire

but when i navigate using routerlink it works

[routerLink]="[p.url]"

i found some suggestion in online searching and i applied them

in router module in changed to

imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, onSameUrlNavigation: 'reload' })
],

i put following into both source and destination page/component constructor/ngoninit

this.router.routeReuseStrategy.shouldReuseRoute = () => {
  return false;
};

also i applied NgZone

this.ngZone.run(() => {
    this.router.navigateByUrl('/login');
  });

but nothing seems work to fire ngoninit or constructor after using router.navigateByUrl()

can anyone please help.

Answer 1

I think you need to use ionViewDidLoad. use like below

 ionViewDidLoad() {
   // your ngoninit function's code 
  }

For details check Ionic navigation lifecycle events. https://ionicframework.com/blog/navigating-lifecycle-events/

Answer 2

We can invoke ngOnInit or Constructor every time by using this.navCtrl.navigateBack(Ionic's) . If we don't use(navigateBack) we can't invoke ngOnInit or Constructor.

(why ngOnInit doesn't invoked every time) :: when a route enters in stack in ionic framework( it stores routes inside stack )doesn't reintialize from starting

navCtrl.navigateBack it will make all existing pages in the stack will be removed, and the navigated page will become the single page in the stack.

invoking ngOnInit & constructor stackblitz

invoking ngOnInit & constructor github

Note: check console.logs in above mentioned urls. (check .ts files inside 'home' & 'list' folders)