Angular re-run ngOnInit when coming back to an initialized page

Issue

When comming back to an initialized page it doesn’t run ngOnInit. For example /user/profile shows username, I go on /user/settings change username, and came back to /user/profile. Username on /user/profile didn’t change because ngOnInit wasn’t called.

So what I want is to re-init page which has been already initialized.
This is router.service.ts which is used for navigation:

export class RouterService {
  constructor(
    private router: Router,
  ) {
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
    this.router.onSameUrlNavigation = "reload";
  };


  async go(path: string[], options: NavigationExtras = {}) {
    this.router.navigate(path, { ...options });
  }
}

If I add replaceUrl: true to the function options it works, initted page re-inits, but the url is not being saved to the browser history and browser back button doesn’t work (it redirects to the beggining of the app).

This is app.module.ts:

@NgModule({
    declarations: [AppComponent],
    imports: [
        ...
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
    ],
    providers: [
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    ],
    bootstrap: [AppComponent]
})

This is app-routing.module.ts:

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

Those are the routes:

const routes = [
    {
        path: "user/profile",
        loadChildren: () => import("./user/profile/profile.module").then(m => m.ProfilePageModule),
        canActivate: [LoggedGuard],
    },
    {
        path: 'user/settings',
        loadChildren: () => import('./user/settings/settings.module').then(m => m.SettingsPageModule),
        canActivate: [LoggedGuard],
    },

Solution

ngOnInit()

The above method executes when the page/component is created. Probably executes when the page is added for first time in routing.This is angular component lifecycle event.

ionViewDidEnter()

This method is executed when we everytime enter the page or component.This is ionic page lifecycle event. So use ionViewDidEnter()

Answered By – mani kandan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0