Angular路由错误NG04002：点击编辑按钮无法匹配路由'edit'

问题分析 #

你遇到的NG04002错误是因为Angular找不到匹配'edit'的路由配置。你的PromotionsGridRoutingModule是通过forChild()定义的子路由，它的路由路径会继承父路由的前缀，直接跳转到/edit会去根路由下查找，自然匹配不到。

解决方案 #

1. 修正编辑按钮的路由跳转路径 #

检查你的编辑按钮代码，把绝对路径改成相对路径：

• 错误示例（绝对路径，会去根路由找edit）：

  <a routerLink="/edit"><i class="铅笔图标"></i></a>
  

• 正确示例（相对路径，基于当前子路由跳转）：

  <a [routerLink]="['edit']"><i class="铅笔图标"></i></a>
  <!-- 若需编辑特定条目，带参数的写法 -->
  <a [routerLink]="['edit', item.id]"><i class="铅笔图标"></i></a>
  

2. 确认父路由配置正确 #

确保引入PromotionsGridRoutingModule的父路由模块已经设置了正确的父路径前缀。比如根路由里应该有类似配置：

const routes: Routes = [
  // 其他路由
  {
    path: 'promotions', // 父路径前缀
    loadChildren: () => import('./promotions/promotions-grid.module').then(m => m.PromotionsGridModule)
  }
];

这样完整的编辑路由就是/promotions/edit，Angular就能正确匹配到你的SinglePromotionComponent。

3. 优化路由配置（可选） #

如果是编辑特定的促销条目，建议给edit路由添加参数，让逻辑更完整：

const routes: Routes = [
  { path: '', component: TableComponent },
  { path: 'edit/:id', component: SinglePromotionComponent }, // 添加id参数
  { path: 'delete', component: SinglePromotionComponent }
];

然后在SinglePromotionComponent里通过ActivatedRoute获取ID：

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  const id = this.route.snapshot.paramMap.get('id');
  // 根据ID获取对应促销数据进行编辑
}

内容的提问来源于stack exchange，提问作者Piotr Deja