Angular -> NG04002：无法匹配任何路由。 URL 段：“编辑”

Question

为什么当我单击编辑按钮（带有铅笔的蓝色图标）时出现错误：

错误：NG04002：无法匹配任何路由。 URL 段：“编辑”

我的仓库： https://github.com/RobotHabanera/august2023

我希望单击图标后打开“SinglePromotionComponent”组件。

const routes: Routes = [
  {
    path: '',
    component: TableComponent,
  },
  { path: 'edit',
    component: SinglePromotionComponent
  },
  {
    path: 'delete',
    component: SinglePromotionComponent,
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes),
    SinglePromotionModule,
    PromotionsGridModule,
    EditBtnModule,
  ],
  exports: [
    RouterModule,
  ]
})
export class PromotionsGridRoutingModule { }

Answer 1

我建议你使用Angular路由的相对路由功能。为什么，因为在复杂的嵌套场景中它会节省你的时间。所以使用它是一个很好的做法。 让我们看看如何使用 在表格组件中

export class TableComponent {
  constructor(private router: Router, private route: ActivatedRouted) {}

  // call navigatetoEdit on click of edit icon
  navigatetoEdit() {
    this.router.navigate(["../edit", { relativeTo: this.route }])
  }
}

我希望当您有更多嵌套的复杂路线时，这将有助于解决这个问题和未来的问题。