[英]Angular Ionic app RouterLink not working despite RouterLink imports
I have an app that was setup using the ionic angular tabs template.我有一个使用离子 angular 选项卡模板设置的应用程序。 For whatever reason I cannot use RouterLink to navigate.无论出于何种原因,我都无法使用 RouterLink 进行导航。 When I click the element that I've provided the RouterLink property to nothing happens.当我单击已提供 RouterLink 属性的元素时,没有任何反应。 I've search for hours and seen the same suggestions as what is here: RouterLink not working in child components我已经搜索了几个小时并看到了与此处相同的建议: RouterLink not working in child components
I've actually added RouterLink in the imports on all my pages but still no luck.我实际上已经在我所有页面的导入中添加了 RouterLink,但仍然没有运气。 Using the angular ionic tab template I am going from a tab page to a nested details page.使用 angular 离子标签模板,我将从标签页转到嵌套详细信息页。 The tab page uses RouterLink successfully to navigate to my detail page.标签页成功使用 RouterLink 导航到我的详细信息页面。 But in my detail page I cannot setup a link or a button to use RouterLink to navigate to another route.但是在我的详细信息页面中,我无法设置链接或按钮来使用 RouterLink 导航到另一条路线。 When I click the button nothing happens.当我单击按钮时,没有任何反应。 What am I missing?我错过了什么?
DetailPage - html 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详细路由-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 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:出现 RouterLink 问题的页面 (DetailPage.html) 正在使用以下命令从另一个页面路由到:
{
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)
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.