首页 > 解决方案 > 角度路由没有传递我的参数值

问题描述

下面是我的路由器文件之一。它适用于“:id”和“:id/edit/list”,但是当我路由到

:id/edit/members => ex。本地主机:4200/bands/1/edit/members

我的解析器没有得到参数 id 值。route.params 为空。

问题- 我对 Angular 路由有点陌生,它设置正确吗?它会做我认为它会做的事吗?

const routes: Routes = [{
    path: '',
    component: BandsComponent
  },
  {
    path: 'list',
    resolve: {
      bands: BandListResolver
    },
    component: BandListComponent
  },
  {
    path: ':id',
    component: BandDetailsComponent,
    resolve: {
      band: BandDetailResolver
    }
  },
  {
    path: ':id/edit',
    component: BandEditComponent,
    resolve: {
      band: BandEditResolver
    },
    children: [{
        path: 'list',
        component: BandEditListComponent
      },
      {
        path: 'profile',
        component: BandEditProfileComponent
      },
      {
        path: 'members',
        resolve: {
          pagination: BandEditMemberResolver
        },
        component: BandEditMembersComponent
      }
    ]
  },

];

这是我的解析器

export class BandEditMemberResolver implements Resolve <IUser[]> {
  constructor(private bandsService: BandsService,
    private alertService: AlertService) {}

  resolve(route: ActivatedRouteSnapshot): Observable <IUser[]> {
    return this.bandsService.getbandEditMembers(route.params.id, 1, 10).pipe(
      catchError(error => {
        this.alertService.danger('Problem retrieving data');
        return of(null);
      })
    );
  }
}

标签: angularangular-routingangular-routing-parameter

解决方案


很确定你只需要在route.paramMap.get('id')这里使用,也就是:

export class BandEditMemberResolver implements Resolve <IUser[]> {
  constructor(private bandsService: BandsService,
    private alertService: AlertService) {}

  resolve(route: ActivatedRouteSnapshot): Observable <IUser[]> {
    return this.bandsService.getbandEditMembers(route.paramMap.get('id'), 1, 10).pipe(
      catchError(error => {
        this.alertService.danger('Problem retrieving data');
        return of(null);
      })
    );
  }
}

推荐阅读