如何在 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

有办法（我没测试）如果你制作一个模块，并在该模块中添加以下项目 routing

  { path:'',component:ProfileComponent},
  { path: 'Dependent', component: DependentComponent },
  { path: 'Matrimony', component: MatrimonyComponent },
  { path: 'Subscription', component: MagazinesubscriptionComponent },
  { path: 'Donation', component: DonationComponent }

然后你可以像

一样在app.routing中重复使用它

{   path: 'Registration',   loadChildren: 'pathToYourModule#ModuleName'  },
{   path: 'Registration/:id',   loadChildren: 'pathToYourModule#ModuleName'  },
{   path: 'Profile',   component: ProfilelistComponent }

Answer 2

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

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

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 }
]

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

How to create optional router argument in angular 7

typescript

angular

angular-router