ошибка маршрутизации и навигации angular 10 с параметром

#angular #angular-routing #angular10

#angular #angular-маршрутизация #angular10

Вопрос:

массив маршрутов

 const routes: Routes = [
 ...
  {path:'exam-list',component: ExamListComponent},
    {path:'exam-panel/:Id',component: ExamPanelComponent}
..
];
  

массив импортирован

 @NgModule({
  imports: [RouterModule.forRoot(routes)],
  

событие щелчка

 onSelect(examdetails)
{
this.router.navigate(['exam-panel',examdetails.Id])
}
  

при выборе события щелчка ()

Я получил эту ошибку Ошибка: неперехваченный (в обещании): Ошибка: не удается сопоставить какие-либо маршруты. Сегмент URL: ‘exam-panel’ с параметром, когда я использую routerLink, он работает нормально, но событие щелчка не работает с маршрутизатором.перейдите

когда я использую [routerLink]=»[‘/ exam-panel/’,examdetails.Id] » это работает, но когда я использую «router.navigate», он запускает первую панель проверки маршрута с параметром ok, затем автоматически перенаправляет на домашнюю страницу

Ответ №1:

Согласно упомянутому в документеhttps://angular.io/docs/ts/latest/api/router/index/Router-class.html , вы можете использовать либо

Навигационный указатель :

 router.navigateByUrl(`/exam-panel/${examdetails.Id}`);
  

или с помощью навигации :

 router.navigate(['/exam-panel', examdetails.Id], {relativeTo: route});
  

относительно вызовов запрашивайте навигацию по динамическому маршруту относительно текущего URL-адреса.

пожалуйста, помните, что мы часто забываем / , что это относительный маршрут. маршрутизатор. для навигации требуется параметр relativeTo для относительной навигации

Комментарии:

1. router.navigateByUrl( /exam-panel/${examdetails.Id} ) ? каковы ваши результаты экзамена. Идентификатор поступает? вы регистрировали это на консоли?

2. examdetails — это массив json, полученный из HTTP-запроса API

3. когда я использую [routerLink]=»[‘/ exam-panel/’,examdetails. Id] » это работает, но когда я использую «router.navigate», он запускает первую панель проверки маршрута с параметром ok, затем автоматически перенаправляет на домашнюю страницу

4. router.navigate([‘/exam-panel’, examdetails. Id], {relativeTo: route}); вы пробовали добавлять ‘ / ‘ в router.navgate перед экзаменационной панелью?

5. {relativeTo: route} можете ли вы объяснить мне, что такое «маршрут»