Angular routing not passing my parameter value

Question

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

score 0 · Answer 1 · answered Dec 20 '20 at 08:47

0

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

answered Dec 20 '20 at 08:47

Josh Stevens

3,943
1
15
22

I just tried this but still get null. Are you sure this is how I can get the route params? I think I might have something wrong, my url in route only shows members. It doesn't show the :id/edit, which is the parent part of the path. So I might be doing something wrong? – chuckd Dec 20 '20 at 19:12

score -1 · Answer 2 · answered Dec 20 '20 at 20:57

-1

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

route.parent.params.id

answered Dec 20 '20 at 20:57

chuckd

13,460
29
152
331

Angular routing not passing my parameter value

2 Answers2