Ionic 5带ID详情页路由配置异常：无法跳转至详情页

我来帮你排查下这个路由跳转的问题，你的代码里主要有两个关键错误导致页面无法跳转到详情页：

问题1：父路由未配置带参数的路径 #

你的父页面路由（RecepiesPageRoutingModule）里只配置了空路径和固定的recipedatail路径，但没有设置带recipeId参数的路由规则，所以当你尝试跳转到带参数的详情页时，路由系统找不到对应的匹配规则，自然就停留在主页面了。

问题2：详情页路由配置错误导致循环引用 #

详情页的路由模块（RecipedatailPageRoutingModule）里，你给:recipeId路径配置了loadChildren指向自己的模块，这会造成循环加载的问题，而且完全没必要——详情页模块本身就是被父路由懒加载的，不需要再自己加载自己。

修正后的代码 #

父页面路由（RecepiesPageRoutingModule）

我们需要在父路由里添加带recipeId参数的路径，指向详情页模块：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RecepiesPage } from './recepies.page';

const routes: Routes = [
  { path: '', component: RecepiesPage },
  // 配置带参数的路径，指向详情页懒加载模块
  { path: ':recipeId', loadChildren: () => import('./recipedatail/recipedatail.module').then(m => m.RecipedatailPageModule) },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class RecepiesPageRoutingModule {}

详情页路由（RecipedatailPageRoutingModule）

详情页路由只需要配置空路径指向自己的组件即可，父路由传递的recipeId参数会自动被当前组件接收：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RecipedatailPage } from './recipedatail.page';

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

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class RecipedatailPageRoutingModule {}

如何在父页面跳转 #

模板跳转（routerLink）

在父页面的列表项或按钮中，使用带参数的路由链接：

<!-- 假设你有一个recipe对象，包含id属性 -->
<ion-item [routerLink]="[recipe.id]">
  <ion-label>{{ recipe.name }}</ion-label>
</ion-item>

编程式导航

如果需要在TS代码里触发跳转：

import { Router } from '@angular/router';

constructor(private router: Router) {}

navigateToDetail(recipeId: string) {
  // 注意路径要对应父路由的层级，比如如果父路由是'recepies'，则路径为['/recepies', recipeId]
  this.router.navigate([recipeId]);
}

接收详情页参数 #

在详情页组件中，你可以通过ActivatedRoute获取recipeId参数：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    const recipeId = params.get('recipeId');
    // 根据recipeId获取对应的食谱数据
  });
}

内容的提问来源于stack exchange，提问作者faizal munna