'Subscribing to route params is not working

I have a page /news with parameter page. For example: /news;page=2. 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:

export class NewsPage implements OnInit {
    constructor(private route: ActivatedRoute) {
    }

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

If /news page is opened and I navigate to /news page with different page parameter (this.router.navigate(['/news', {page: 2} ])) then the page is reinitialized (the page is destroyed and created again).

But if I use queryParams (/news?page=2) instead of params (/news;page=2) then everything works fine:

export class NewsPage implements OnInit {
    constructor() {
    }

    ngOnInit() {
        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?

Here is my routing file:

const routes: Routes = [
  { path: "", redirectTo: "/home", pathMatch: "full" },
  {
    path: "news",
    loadChildren: "./pages/news/news.module#NewsPageModule"
  }
  { path: "**", redirectTo: "/page404" }
];

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

Here is my news page module:

const routes: Routes = [
  {
    path: "",
    component: NewsPage
  }
];
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    SharedModule
  ],
  declarations: [NewsPage]
})
export class NewsPageModule {}

angular

Solution 1:^[1]

Update you navigate function call :)

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

then

export class NewsPage implements OnInit {
    constructor(private route: ActivatedRoute) {
    }

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

Solution 2:^[2]

Subscribing to route params is deprecated, now you can access following

this.id = this.route.snapshot.params.id;

Solution 3:^[3]

I know that this is coming late, but subscribe to params in your constructor instead of ngOnInit

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	rijin
Solution 2	Asif Rahman
Solution 3	Kotai

'Subscribing to route params is not working

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]