Subscribing to route params is not working

[ildar-icoosoft]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)             : 4.3.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.12
   @angular-devkit/build-angular : 0.7.5
   @angular-devkit/schematics    : 0.7.5
   @angular/cli                  : 6.1.5
   @ionic/angular-toolkit        : 1.1.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (0 plugins total)

System:

   Android SDK Tools : 26.1.1 (/Users/ildar/Library/Android/sdk)
   ios-deploy        : 1.9.2
   NodeJS            : v11.0.0 (/usr/local/bin/node)
   npm               : 6.4.1
   OS                : macOS High Sierra
   Xcode             : Xcode 9.4 Build version 9F1027a

Describe the Bug
Subscribing to route params is not working.
I have a page "/news" with parameter: page (for example /news;page=1)

I don't want to reinitialize news page when page is changed. I just want to subscribe to page changes, I've tried this code:

this.route.params.subscribe(params => ...)

If I open /news page and navigate to /news page with different page parameter:

this.router.navigate(['/news', {page: 3} ])

then NewsPage component is reinitialized (component is destroyed and created). But if I use queryParams (/news?page=2) instead of params (/news;page=2) then everything works fine:

this.route.queryParams.subscribe(params => {
    ...
});

If I call

this.router.navigate(['/news'], {queryParams: {page: 2}} ) 

then the page is NOT reinitilized. Just subscribe callback is executed. Why does it happen?

[bryce13950]

What behavior are you expecting? You don't want to be reinitialized, and you want to have the subscription called correct?

[ildar-icoosoft]

@bryce13950
I want component not to be reinitialized. Only subscription callback should be executed. It works perfectly in pure angular: https://stackblitz.com/edit/angular-gitter-vtbpre

[bryce13950]

Got it

[kensodemann]

@ildar-icoosoft - this may have to do with our RouteReuseStrategy: https://github.com/ionic-team/ionic/blob/master/angular/src/util/ionic-router-reuse-strategy.ts

Could you try your app without it and see if you get the behavior you are looking for?

Your app.module.ts probably looks something like this:

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(),
    AppRoutingModule
  ],
  providers: [
    httpInterceptorProviders,
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Try it without the { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } line and let me know if that works for you.