角度路由：为单个路由定义多个路径

Question

我已经看到了几个答案，但我不确定它们是否一定“适合”我的场景（我不是试图创建父/子路由关系或类似的东西）。就我而言，我有一个组件负责添加新的小部件或编辑现有的小部件。我的路线是这样定义的：

const routes: Routes = [
  {
    path: 'widget/add',
    component: ManageWidgetComponent,
    canActivate: [CanActivateViaRoleGuard],
    data: { roles: ['Admin', 'User'] }
  },
  {
    path: 'widget/:id/edit',
    component: ManageWidgetComponent,
    canActivate: [CanActivateViaRoleGuard],
    data: { roles: ['Admin', 'User'] }
  },
];

path 是string，所以它不能接受值数组或类似的东西。有没有办法为单个路由指定多个路径，这样我就不必复制路由的其他部分（组件、canActivate 和数据部分）？

注意：由于应用程序要求，路径不能更改（即我不能只创建一个manage 路径）。

编辑：我的ManageWidgetComponent 已经具有处理创建与编辑的正确逻辑。那部分很好。

Answer 1

我认为你可以这样做：

const routes: Routes = ['widget/add', 'widget/:id/edit'].map(path => {
 return {
    path: path,
    component: ManageWidgetComponent,
    canActivate: [CanActivateViaRoleGuard],
    data: { roles: ['Admin', 'User'] }
  };
});

Answer 2

你可以使用这种格式：

  {
     path: 'widget/:id/add-edit',
     component: ManageWidgetComponent,
     canActivate: [CanActivateViaRoleGuard],
     data: { roles: ['Admin', 'User'] }
  },

并在 ManageWidgetComponent 中使用休闲代码检查“id”是否存在值？如果 id 没有值，那么您正在添加新用户，如果“id”有值，那么您正在编辑用户。

this.route.params.subscribe((params: any) => {
        if (params.id) {
            //////you are editing a user
        }else{
            ///// you are adding a new user
        }
     }
);

Answer 3

按照惯例，路由和路径之间存在一对一的关系（它们基本上是同一件事），因此您不能为单个路由设置不同的路径。 但是你可以有不同的路径来加载相同的组件（这就是你在上面的例子中所做的）

解决这个问题的方法是：

{
   path: 'widget/:id',
   component: ManageWidgetComponent,
   canActivate: [CanActivateViaRoleGuard],
   data: { roles: ['Admin', 'User'] }
},

然后您可以导航到widget/add 或widget/123

在ManageWidgetComponent:

this.route.params.subscribe((params) => {
    if (params.id === 'add') {
        // Add new user
    } else {
        // Edit user with id = +params.id
    }
});