Параметр угловой маршрутизации недоступен
Обновлено: (решение)
Основная причина моей проблемы заключалась в том, что в app.component программно были добавлены дополнительные маршруты. Я обнаружил это, отключив все маршруты в app-routing.module, и по-прежнему загадочным образом смог перейти к рассматриваемому маршруту. После удаления программно добавленных маршрутов все заработало должным образом. Спасибо всем за помощь! :-)
ОРИГИНАЛ (вопрос):
Я использую следующий код в своем компоненте для подписки на параметры маршрута:
this.activatedRoute.params.subscribe((values) => {
console.info('these are my parameters: ', values);
});
Все работает нормально, параметры маршрута получаю без проблем.
Это рабочая конфигурация маршрута:
{
path: 'details/:itemId',
component: ItemDetailsComponent,
},
Теперь к проблеме: Когда я пытаюсь упростить свой маршрут (поскольку мне не нужны другие маршруты), возникает следующая проблема: после внесения следующего простого изменения в конфигурацию маршрута я больше не могу получить доступ к параметрам маршрута (они пусты).
Это дефектная конфигурация маршрута:
{
path: ':itemId',
component: ItemDetailsComponent,
},
Кто-нибудь знает, почему я больше не могу получить доступ к единственному параметру маршрута после сокращения маршрута?
Означает ли это, что вы хотите связать ItemDetailsComponent с URL-адресом маршрута вашего приложения?
@Mehdi да, именно так
@Abhishek Я пробовал это, но angular жалуется на маршруты, не начинающиеся с косой черты
Ответы 3
Похоже, вы все еще пытаетесь перейти к details/:itemId, хотя вам следовало сделать это только для :itemId. Убедитесь, что вы идете по правильному пути.
После внесения изменений /details будет работать и будет считаться itemId. Но /details/1 или любой другой такой путь приведет к ошибке.
ваш стекблитц работает! Но в моем приложении это не работает ... Маршрут проложил вручную
@TobiasGassmann, какой маршрут ты проложил? Скажите, пожалуйста, точный путь, по которому вы пытаетесь направить своего пользователя.
www.example.com/123
и я не могу достать "123"
и создается экземпляр нужного компонента, я проверил это с помощью console.infos. Просто параметр маршрута отсутствует
Не могли бы вы разветвить мою ссылку на StackBlitz и внести изменения в соответствии со своим сценарием, чтобы вы могли воспроизвести эту проблему?
Я попробую, но как кажется, в stackblitz все работает нормально ...
Работает нормально. См. Stackblitz: https://stackblitz.com/edit/angular-nqzpum
Создайте стек, пожалуйста
Кажется, я не могу воспроизвести свою локальную проблему в stackblitz .. в stackblitz все работает нормально .. Я буду продолжать попытки
Если конфигурация маршрута находится внутри какого-либо модуля, отличного от AppModule, вам может потребоваться подписаться на родительские параметры с помощью this.activatedRoute.parent.params.subscribe.
в этом случае вам действительно не нужно указывать переменную в вашем router.module, которая должна выглядеть так:
{
path: '',
component: ItemDetailsComponent,
},
Затем, если вам нужно открыть конкретный элемент, используйте
this.router.navigate(["", {itemId: 123}]);
при условии, что маршрутизатор вводится как Маршрутизатор, где выполняется вызов.
Затем вам нужно ввести в свой ItemDetailsComponent ActivatedRoute: ActivatedRoute
this.activatedRoute.params.subscribe(
(params) => {
//ItemId will be available here when url changes
console.info(params.itemId);
}
);
вы пробовали
/:itemId?