ionic 4 + angular: routerLink only works first time

Yassine Zeriouh picture Yassine Zeriouh · Dec 19, 2018 · Viewed 8k times · Source

I'm having a weird bug while developing a basic app from scratch right now. I use Ionic 4 beta 19 and I've put a routerLink to another page, the route is set up in the base pages module like so:

RouterModule.forChild([
  { path: '', component: NewsPage },
  { path: ':id', component: DetailPage }
])

the routerLink attribute is set on a card and it works just fine when clicking on a card, but when I go back and press that same card or another one, the router just doesn't do anything at all. I don't get any errors and the URL in the browser is working perfectly. How can this be?

Edit: Also, DetailPage doesn't have a module so it's basically just a page.

Edit: Card code looks like this:

<ion-card *ngFor="let item of items;" [routerLink]="[item.id]">
  ...
</ion-card>

In the detail page, route params are subscribed and the :id param will be used for a GET request subscription to retrieve the data

Answer

Yassine Zeriouh picture Yassine Zeriouh · Dec 20, 2018

Solved it by using navigateByUrl instead like this:

open(id: number) {
  this.router.navigateByUrl(this.router.url + '/' + id);
}

and for the card:

<ion-card *ngFor="let item of items;" (click)="open(item.id)">
    ...
</ion-card>

Still don't know why this is happening but this works as a workaround for now.