Параметр Angular Routing Route Params является пустым объектом в резольвере дочернего компонента

Это моя настройка маршрута.

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: ''
  }
];

Это мой вызов роутера для перехода к book/:id от /confirm

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

В моем BookResolver, если я пытаюсь получить доступ к любому из параметров под снимком ActivatedRoutes, я получаю пустой объект.

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

  constructor(private _activatedRoute: ActivatedRoute) {}

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

Однако, если я пытаюсь получить доступ к той же вещи из BookComponent, я получаю желаемый результат. Как в,

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

Где именно происходит неправильная настройка моего маршрута? Я предполагаю, что установка виновата здесь. Дайте мне знать, если вам нужно больше ясности по этому вопросу.

Вот воспроизведение стекаблица.

1 ответ

С помощью snapshot.params хорошо только тогда, когда компонент загружается впервые. вместо этого вы должны подписаться на наблюдаемый параметр на вашем ngOnInit,

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

также вместо этого хака

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

Вы должны правильно ориентироваться:

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

Другие вопросы по тегам