Javascript 角度布线：为单个布线定义多个路径

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

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

是一个

字符串

，因此它不能接受值数组或类似的内容。是否有一种方法可以为单个路由指定多个路径，这样我就不必复制路由的其他部分（组件、canActivate和数据部分）

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

管理
路径）

编辑：我的
ManageWidgetComponent
已经具有处理创建与编辑的正确逻辑。那部分没问题。
您可以使用以下格式：

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

在ManageWidgetComponent中，使用fallowing代码检查“id”是否有值？如果id没有值，则您正在添加新用户，如果“id”有值，则您正在编辑用户

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

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

解决这一问题的方法是：

{
   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
    }
});

我想你可以这样做：

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

这似乎不起作用。您无法导航到
小部件/add edit
（找不到路由）。我无法更改路径，因为它们是（应用程序要求）。请尝试以下路径：['widget/add'，'widget/：id/edit'，']，谢谢您提供的信息！遗憾的是，由于应用程序的要求，我无法更改路径本身（它们必须是
/widget/add
和
widget/：id/edit
）。