Angular Routing Route Params是子组件的解析器中的空对象

Question

This is my route setup.

const appRoutes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'get',
    canActivateChild: [CanActivateOrder],
    children: [
      {
        path: '',
        redirectTo: 'confirm',
        pathMatch: 'full'
      },
      {
        path: 'confirm',
        component: ConfirmComponent
      },
      {
        path: 'book/:id',
        resolve: {
          pageData: BookResolver
        },
        component: BookComponent
      }]
  },
  {
    path: '**',
    redirectTo: ''
  }
];

This is my router call to navigate to book/:id from /confirm

this._router.navigate(['get/book', 1234]);

In my BookResolver, if I try to access any of the params under ActivatedRoutes' snapshot, I get empty object.

@Injectable()
export class BookResolver implements Resolve<any> {

  constructor(private _activatedRoute: ActivatedRoute) {}

  resolve(): Observable<Book> {
    console.log(this._activatedRoute.snapshot.params);
    //This is {}
  }

However, If I try to access the same thing from the BookComponent, I get the desired output. As in,

export class BookComponent {
  constructor(ac: ActivatedRoute){
    console.log(ac.snapshot.params);
    //this is {id: 1234}
  }
}

Where exactly is my route setup going wrong? I'm assuming the setup is at fault here. Let me know if you need more clarity on the question.

Here's a stackblitz reproduction .

Answer 1

Using snapshot.params is only good when the component first loads. you should instead, subscribe to the param's observable on your ngOnInit .

this.ac.params.subscribe(
  (params: Params) => console.log(params);
);

also instead of this hack:

this._router.navigate(['get/book', 1234])

you should navigate properly:

this._router.navigate(['get', 'book', 1234])