I have an app that was setup using the ionic angular tabs template. For whatever reason I cannot use RouterLink to navigate. When I click the element that I've provided the RouterLink property to nothing happens. I've search for hours and seen the same suggestions as what is here: RouterLink not working in child components
I've actually added RouterLink in the imports on all my pages but still no luck. Using the angular ionic tab template I am going from a tab page to a nested details page. The tab page uses RouterLink successfully to navigate to my detail page. But in my detail page I cannot setup a link or a button to use RouterLink to navigate to another route. When I click the button nothing happens. What am I missing?
DetailPage - html
<ion-card>
<ion-card-header>
<ion-card-title>Bla</ion-card-title>
</ion-card-header>
<ion-card-content>
<a [routerLink]="['/bla/1']">
More...
</a>
</ion-card-content>
</ion-card>
detail-routing-module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DetailPage } from './detail.page';
const routes: Routes = [
{
path: '',
component: DetailPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes),
RouterModule
],
exports: [RouterModule],
})
export class DetailPageRoutingModule {}
detail.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { DetailPageRoutingModule } from './detail-routing.module';
import { DetailPage } from './detail.page';
import { RouterModule } from '@angular/router';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
DetailPageRoutingModule,
RouterModule
],
declarations: [DetailPage]
})
export class DetailPageModule {}
So it turns out that my issue was that my modules were not being loaded.
The page that had the RouterLink issue (DetailPage.html) was being routed to from another page using:
{
path: 'detail/:competitionId',
component: DetailPage,
},
Changing the above to what is below fixed the problems:
{
path: 'detail/:competitionId',
loadChildren: () => import('./detail/detail.module').then( m => m.DetailPageModule)
},
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.