无法路由到 Angular 中的正确组件

Question

不确定我是否正确设置了路由。我似乎无法使用

路由到 'MemberEditComponent'

[routerLink]="['/members/edit']"

这是我的会员模块的应用程序路由部分

{
  path: 'members',
  runGuardsAndResolvers: 'always',
  canActivate: [AuthGuard],
  loadChildren: () =>
    import ('./members/members.module')
    .then(mod => mod.MembersModule)
},

这是我的成员路由文件，其中路由到成员工作正常，路由到 '/members/1' 工作正常，但我不知道如何路由到 '/members/edit'

我都试过了

path: ':edit',

和

path: '/edit',

和

path: 'edit',

和none工作

const routes: Routes = [{
    path: '',
    component: MembersComponent
  },
  {
    path: ':id',
    component: MemberDetailsComponent,
    resolve: {
      user: MemberDetailResolver
    }
  },
  {
    path: ':edit',
    component: MemberEditComponent,
    canDeactivate: [PreventUnsavedChangesGuard]
  },
];

Answer 1

那是因为，在你的路由中，你指定了 2 个可以读取相同的参数，所以默认情况下，如果你访问 /members/edit，它将首先登陆你的 MemberDetailsComponent 作为angular 将您的 /edit 视为 MemeberDetailsComponent

的 :id 参数

{
    path: ':id',
    component: MemberDetailsComponent,
    resolve: {
      user: MemberDetailResolver
    }
  },
{
    path: ':edit',
    component: MemberEditComponent,
    canDeactivate: [PreventUnsavedChangesGuard]
},

相反，您可以这样实现它：

{
    path: 'edit',                                   // without :, so this will be matched first if the route has /edit in it
                                                    // or edit/:id if you are editing something in this component
    component: MemberEditComponent,
    canDeactivate: [PreventUnsavedChangesGuard]
},
{
    path: ':id',
    component: MemberDetailsComponent,
    resolve: {
      user: MemberDetailResolver
    }
},

无法路由到 Angular 中的正确组件

Can't route to correct component in Angular

angular-routing

angular