Невозможно перейти к дочерним маршрутам с помощью метода router.navigate или routerlink :: Ошибка: Не удается сопоставить никакие маршруты. Сегмент URL: 'child2'

1

Изображение 174551

Здесь мои маршруты постоянны

const routes: Routes = [
  {
    path: '',
    component: LoginComponent
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      {
        path: '**',
        redirectTo: 'child1'
      },
      {
        path: 'child1',
        component: Child1Component
      },
      {
        path: 'child2',
        component: Child2Component
      }
    ]
  }
];

RouterModule.forRoot(routes)

добавила эту строку в импорт модуля.

внутри MenuComponent, я пытаюсь перейти к соответствующему дочернему компоненту при щелчке любого из меню (child1 или child2), используя эту строку

this.router.navigate(['/dashboard/child1']); //or tried with this.router.navigate(['child1']);

Роутер-выход находится в DashboardComponent

Кто-нибудь может мне с этим помочь?

Теги:
angular
angular2-routing

2 ответа

0
Лучший ответ

это, вероятно, происходит из-за первой стратегии матча Angular. Когда вы пытаетесь нажать любой URL-адрес, подстановочный знак является первым, с которым можно столкнуться, и это верно для всех. Положите его в конце, и он будет работать.

Порядок маршрутов в конфигурации имеет значение, и это по дизайну. Маршрутизатор использует стратегию выигрышей в первом матче при сопоставлении маршрутов, поэтому более конкретные маршруты следует размещать над менее конкретными маршрутами. В приведенной выше конфигурации сначала перечисляются маршруты со статическим путем, а затем пустым маршрутом пути, который соответствует маршруту по умолчанию. Маршрут подстановочных знаков является последним, потому что он соответствует каждому URL-адресу и должен быть выбран только в том случае, если в первый раз не совпадают никакие другие маршруты. Угловой маршрутизатор

{
path: 'dashboard',
component: DashboardComponent,
children: [
  {
    path: 'child1',
    component: Child1Component
  },
  {
    path: 'child2',
    component: Child2Component
  },
  {
    path: '**',
    redirectTo: 'child1'
  }
]

}

Поделиться
  • 0
    @ Фараз О, понял !! Благодарю. У меня сейчас вопрос, он работает нормально, если я использую весь путь 'dashboard / child1' при навигации из MenuComponent, но не с 'child1'. Почему он не идет по относительному пути?
  • 0
    @ suraj13k, потому что путь 'child1' является дочерним путем. И это может быть достигнуто только через родителей. когда вы указываете '/ child1', он ищет только на родительском уровне (уровень 1), там он не находит пути, относящегося к 'child1'. но когда вы указываете '/ dashboard / child1', он ищет 'dashboard', а когда он находит dashboard, он ищет в своих дочерних элементах соответствующий путь.
Показать ещё 1 комментарий
0

Родительский компонент будет DashboardComponent, поскольку он соответствует маршрутизации.

Для того, чтобы иметь подструктуру в Angular, вам нужно разместить

<router-outlet></router-outlet>

внутри вашего DashboardComponent, чтобы маршрутизатор знал, где разместить Child1Component.

Поделиться
  • 0
    роутер-розетка находится в DashboardComponent. Я упомянул об этом в моем вопросе
  • 0
    Вы можете поделиться HTML-шаблоном DashboardComponent?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню