параметр угловой маршрутизации недоступен

Question

РЕДАКТИРОВАТЬ: (решение)

Основной причиной моей проблемы было то, что в app.component были добавлены дополнительные маршруты программно. Я нашел это, отключив все маршруты в app-routing.module и все еще таинственным образом способный перейти к рассматриваемому маршруту. После удаления программно добавленных маршрутов все работало как положено. Спасибо всем за помощь! : -)

ОРИГИНАЛ (вопрос):

Я использую следующий код в своем компоненте для подписки на параметры маршрута:

this.activatedRoute.params.subscribe((values) => {
  console.log('these are my parameters: ', values);
});

Все отлично работает, параметры маршрута получаю без проблем.

Это рабочая конфигурация маршрута:

{
  path: 'details/:itemId',
  component: ItemDetailsComponent,
},

Теперь к проблеме: Когда я пытаюсь упростить мой маршрут (поскольку мне не нужны никакие другие маршруты), возникает следующая проблема: После внесения следующего простого изменения в конфигурацию маршрута я больше не могу получить доступ к параметрам маршрута (они пусты).

Это неправильная конфигурация маршрута:

{
  path: ':itemId',
  component: ItemDetailsComponent,
},

Кто-нибудь знает, почему я больше не могу получить доступ к одному параметру маршрута после того, как укоротил маршрут?

Answer 1

Работает нормально. Смотрите стекаблиц: https://stackblitz.com/edit/angular-nqzpum

Answer 2

в этом случае вам не нужно указывать переменную в вашем router.module, которая должна выглядеть следующим образом:

{
  path: '',
  component: ItemDetailsComponent,
},

Тогда, если вам нужно, в частности, открыть элемент, используйте

this.router.navigate(["", {itemId: 123}]);

при условии, что маршрутизатор введен как Маршрутизатор , где выполняется вызов.

Затем вам нужно добавить в свой ItemDetailsComponent activRoute: ActivatedRoute

this.activatedRoute.params.subscribe(
  (params) => {
    //ItemId will be available here when url changes
    console.log(params.itemId);
  }
);

Answer 3

Похоже, вы все еще пытаетесь перейти к details/:itemId, когда вы должны были сделать это всего за :itemId. Убедитесь, что вы идете по правильному пути.

После внесения изменений /details будет работать и будет рассматриваться как itemId. Но /details/1 или любой такой путь может привести к ошибке.

Вот Рабочий образец StackBlitz для вашей ссылки.