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

您可以使用以下格式：

  {
     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 2

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

解决此问题的一种方法是：

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

Answer 3

我认为您可以执行以下操作：

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

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

3 个答案: