Angular如何配置子路由实现父子组件页面正常跳转

子路由导航异常核心由3个常见配置错误导致：

• 父级PublicNoticesPage组件模板未放置子路由渲染出口，子页面加载后无挂载位置
• public-notices模块路由配置中，子路由与父级空路径为平级关系，未做嵌套声明，且缺失notices-details页的路由规则
• 跳转时路径写法错误，未基于/public-notices父路由前缀补全子路由路径

1. 调整public-notices模块路由配置 #

将原平级的子路由全部挂载到父路由的children数组下，补充缺失的notices-details路由规则，修改后的public-notices-routing.module.ts代码如下：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { PublicNoticesPage } from './public-notices.page';

const routes: Routes = [
  {
    path: '',
    component: PublicNoticesPage,
    children: [
      {
        path: 'notices-list',
        loadChildren: () => import('./notices-list/notices-list.module').then(m => m.NoticesListPageModule)
      },
      {
        path: 'notice-categories',
        loadChildren: () => import('./notice-categories/notice-categories.module').then(m => m.NoticeCategoriesPageModule)
      },
      {
        path: 'notice-comments',
        loadChildren: () => import('./notice-comments/notice-comments.module').then(m => m.NoticeCommentsPageModule)
      },
      {
        path: 'notices-nearby',
        loadChildren: () => import('./notices-nearby/notices-nearby.module').then(m => m.NoticesNearbyPageModule)
      },
      // 补充公告详情页路由，需要动态传公告ID就加:id参数
      {
        path: 'notices-details/:id',
        loadChildren: () => import('./notices-details/notices-details.module').then(m => m.NoticesDetailsPageModule)
      }
    ]
  }
];

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

若需要进入public-notices路径时默认加载某个子页（比如公告列表），可在children数组中新增重定向规则：

{
  path: '',
  redirectTo: 'notices-list',
  pathMatch: 'full'
}

如果需求是子页面跳转时全页面替换、不保留父页面内容，无需配置children嵌套，保持路由平级即可，跳转时写绝对路径。

2. 给父组件添加路由出口 #

打开public-notices.page.html文件，在需要显示子页面的位置添加路由出口标签：

<!-- 父页面原有内容，比如顶部导航、分类切换栏等 -->
<div class="public-notices-wrapper">
  <h2>公共公告</h2>
  <!-- 子路由渲染出口，子页面内容将挂载到该位置 -->
  <router-outlet></router-outlet>
</div>

如果项目基于Ionic框架开发，将<router-outlet>替换为项目统一使用的<ion-router-outlet>即可，不要混写两种出口标签。

3. 修正导航跳转的路径写法 #

不管使用routerLink指令还是TS代码调用路由API，都要保证路径匹配规则：

• 模板内跳转写法：

<!-- 相对路径写法，仅可在PublicNoticesPage组件模板内使用 -->
<button routerLink="notices-list">查看公告列表</button>
<!-- 跳转详情页并传参 -->
<button routerLink="notices-details/1001">查看公告详情</button>
<!-- 绝对路径写法，全应用任意位置均可使用 -->
<button routerLink="/public-notices/notice-categories">公告分类管理</button>

• TS代码内跳转写法：

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

constructor(
  private router: Router,
  private route: ActivatedRoute
) {}

// 跳转附近公告页
goToNearbyNotices() {
  // 相对路径写法需传入relativeTo参数指定当前路由
  this.router.navigate(['notices-nearby'], { relativeTo: this.route });
  // 绝对路径写法无需额外参数
  // this.router.navigate(['/public-notices/notices-nearby']);
}

// 跳转公告详情页
goToNoticeDetail(noticeId: number) {
  this.router.navigate([`/public-notices/notices-details/${noticeId}`]);
}

4. 校验子模块路由配置 #

检查每个子页面（含notices-details）自身的路由模块文件，确保空路径配置正确，以notices-details-routing.module.ts为例：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { NoticesDetailsPage } from './notices-details.page';

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

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

如果子页面还有下一级子路由，按照相同逻辑配置children数组、在对应组件模板添加路由出口即可。

• 确认所有模块都正确导入了对应的路由模块，比如PublicNoticesPageModule需要导入PublicNoticesPageRoutingModule，子页面模块同理
• 开发阶段可开启Angular路由调试日志，在根路由forRoot配置中添加enableTracing: true，跳转时控制台会打印完整路由匹配流程，可快速定位匹配失败节点：

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { 
      preloadingStrategy: PreloadAllModules,
      enableTracing: true // 生产环境构建前需删除该配置
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

• 检查路由路径不要多写/漏写斜杠，懒加载路径不要写错模块文件名和导出类名

内容的提问来源于stack exchange，提问作者Bongani Dlamini