CODEWITHSUNDEEP
angularionic-frameworkangular7betaionic4
dmnkthfx
dmnkthfx

Reputation: 93

Ionic 4 beta 18 - ion-item and ion-button with routerLink don't change route

I just updated from ionic 4 beta 17 to 18 and a breaking change in <ion-item> and <ion-button> was introduced. The href was replaced with routerLink.

I added this to my code and now the routing doesn't work anymore. Most of the time the compiler throws errors and says, that routerLink does not exist in ion-item.

What did i do wrong? Or is it angular?

"@ionic/angular": "~4.0.0-beta.18",
"@ionic/core": "~4.0.0-beta.18",
"@angular/core": "^7.1.3",
"@angular/router": "~7.1.3",

<ion-item text-wrap class="nav-item" routerDirection="forward" 
        [routerLink]="p.url"
        *ngFor="let p of listOfPages; let i = index"
        [class.active-item]="checkActivePath(p.url)"
        [class.last-item]="i === (listOfPages.length - 1)">
    <ion-label class="nav-label">
        <ion-img [src]="p.icon" class="nav-icon"></ion-img>
        <div class="text-block">
            {{ p.title }}
        </div>
    </ion-label>
</ion-item>

Upvotes: 1

Views: 12544

Answers (3)

dmnkthfx
dmnkthfx

Reputation: 93

So this is what finally worked for me:

  1. Make sure to include the RouterModule in every module.

  2. In every nested module I used

    const routes: Routes = [{
    path: '',
    component: AboutUsPage
}];

  3. I imported RouterModule.forChild(routes) there aswell.

  4. For routes I added / before the path. Like '/home'
  5. In app-routing.ts I used {path: 'about-us/:id', component: AboutUsPage},.

Upvotes: 3

Matti Lehtinen
Matti Lehtinen

Reputation: 1764

Import RouterModule in the module file of the module where the template is (the module where routerLink is used):

import { RouterModule } from '@angular/router';
@NgModule({
    imports: [
        // ...
        RouterModule,
    ]

Upvotes: 6

Tomas Vancoillie
Tomas Vancoillie

Reputation: 3878

Maybe the missing " after routerDirection?

routerDirection="forward

EDIT: when you are using a Ionic component, you should use href. RouterLink is for non-Ionic components.

Upvotes: 0

Related Questions