Angular routing not passing my parameter value

417 Views Asked by At

Here below is one of my router files. It works fine for ':id' and ':id/edit/list', but when I route to

:id/edit/members => ex. localhost:4200/bands/1/edit/members

my resolver doesn't get the param id value. route.params is empty.

QUESTION - I'm a little new to Angular routing, is it set up correctly? And will it do what I think it will do?

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
      }
    ]
  },

];

Here is my resolver

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

2

There are 2 best solutions below

1
On

Pretty sure you just need to use route.paramMap.get('id') instead here aka:

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);
      })
    );
  }
}
0
On

I solved it by looking into the documentaiton and getting the parent.

route.parent.params.id