angular - 如何在 angular 7 中创建可选的路由器参数

Question

我有一个如下所示的路由器配置。

const routes: Routes = [
  {
    path: 'Registration',
    component: RegisterComponent,
    children: [
      { path:'',component:ProfileComponent},
      { path: 'Dependent', component: DependentComponent },
      { path: 'Matrimony', component: MatrimonyComponent },
      { path: 'Subscription', component: MagazinesubscriptionComponent },
      { path: 'Donation', component: DonationComponent }
        ]
  },
  {
    path: 'Profile',
     component: ProfilelistComponent
    //component: VoteprofileComponent
  }
];

我想用于编辑的同一路由器。意思如下图所示。

const routes: Routes = [
  {
    path: 'Registration/:id',
    component: RegisterComponent,
    children: [
      { path:'',component:ProfileComponent},
      { path: 'Dependent', component: DependentComponent },
      { path: 'Matrimony', component: MatrimonyComponent },
      { path: 'Subscription', component: MagazinesubscriptionComponent },
      { path: 'Donation', component: DonationComponent }
        ]
  },
  {
    path: 'Profile',
     component: ProfilelistComponent
    //component: VoteprofileComponent
  }
];

无论如何，是否有 Angular 而不复制我可以实现的完整路由配置。

意思是我可以将参数指定为可选？

Answer 1

我不知道使参数可选的方法。根据您要实现的目标，您可以使用可以在 id 参数中检测到的特定字符串(Registration/new vs Registration/678A6)。

无论如何，路线只是简单的 typescript ，所以我想你可以这样保持干燥:

const registrationRouteConfig = {
  component: RegisterComponent,
  children: [
    { path:'',component:ProfileComponent},
    { path: 'Dependent', component: DependentComponent },
    { path: 'Matrimony', component: MatrimonyComponent },
    { path: 'Subscription', component: MagazinesubscriptionComponent },
    { path: 'Donation', component: DonationComponent }
  ]
}

const routes: Routes = [
   { path: 'Registration', ...registrationRouteConfig },
   { path: 'Registration/:id', ...registrationRouteConfig },
   { path: 'Profile', component: ProfilelistComponent }
]