Menu
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
714
routerLinkActive is simply an indicator of whether this link represents the active route. @jessepinho - Tried it - [routerLinkActive]="'active'" will only work if you also have [routerLink] in the a-tag. If you had (click)="navitageTo('/route')" instead of [routerLink], and in that function, you called this.
RouterLink is a built-in Angular Directive that lets you link to specific routes in your app. In the SPA(single-page application), you change what the user sees by showing or hiding portions of the display that correspond to particular components, rather than going out to the server to get a new page.
Using RouterLink Directive RouterLink directive has support of ActivatedRoute automatically for relative navigation. We can use relative path and absolute path both with RouterLink directive.
What is the difference between [routerLink] and routerLink ? How should you use each one? They're the same directive. You use the first one to pass a dynamic value, and the second one to pass a static path as a string.
This is already fixed, just run npm i @ionic/angular to update to the fixing version 4.2.0 or superior.
This was also affecting router.navigate(['url', params]) functionality
195
If it is possible, a workaround is to use absolute path instead of relative path as said in this github answer :
I will leave this issue open, and we will try to fix, but it's far from trivial and using absolute paths is a good workaround!
We are aware of this issue :)
So you will have :
<ion-item routerLink="/home" />
instead of :
<ion-item routerLink="home" />
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.
4
This is a known bug. You can find the GitHub issue here: https://github.com/ionic-team/ionic/issues/16534.
As @mario above mentions, absolute links will work with routerLink. See comment here: https://github.com/ionic-team/ionic/issues/16534#issuecomment-444610330
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
