Модуль угловой маршрутизации - дочерний компонент не загружен - PullRequest
Новая
       4

Модуль угловой маршрутизации - дочерний компонент не загружен

0 голосов
/ 04 июня 2018

У меня есть функциональный модуль, который я загружаю в AppModule, AppRoutingModule выглядит как 

const appRoutes: Routes = [
  ...
  {
    path: 'move-request/:id',
    loadChildren: 'app/modules/move_requests/move_requests.module#MoveRequestModule'
  },
  ...
];

А конфигурация маршрутизации для функционального модуля выглядит как 

const moveRequestRoutes: Routes = [

  {
    path: '',
    component: MoveRequestFormComponent,
    data: {title: 'Move Request'}
  },
  {
    path: 'move-request-success',
    component: RequestSuccessComponent,
    data: {title: 'Move request success'}
  },
];

Я бынравится переходить к MoveRequestFormComponent как компоненту по умолчанию, когда move-request/:id маршрутизируется, это работает нормально, но когда я вызываю 

this.router.navigate(['/move-request-success', {}]);

In MoveRequestFormComponent после некоторого ответа от сервера, я получаю 

zone.js:665 Unhandled Promise rejection: Cannot match any routes. URL Segment: 'move-request-success' ; Zone: <root> ;

Эта конфигурация работала до того, как я переключился на Angular 6, это из-за изменения в AppModule, где я исключил этот функциональный модуль как импорт?

Любая помощь в чемЯ скучаю, будет высоко ценится.Как я уже пробовал, имея третий компонент, который будет компонентом по умолчанию и использует router-outlet для визуализации дочерних элементов и иметь свойство children на этом маршруте, чтобы иметь в качестве дочерних элементов 

 {
   path: '',
   component: MoveRequestFormComponent,
   data: {title: 'Move Request'}
 },
 {
   path: 'move-request-success',
   component: RequestSuccessComponent,
   data: {title: 'Move request success'}
 },

Но это такжене работал, он оставался на MoveRequestFormComponent, когда 'move-request-success' был перемещен на. Или, может быть, мне следует изменить подход?

Ответы [ 2 ]

0 голосов
/ 04 июня 2018

this.router.navigate (['/ move-request-success', {}]) ;.Если вы добавляете / к маршруту, это означает, что вы используете абсолютный путь от root.Вы пробовали без /?

РЕДАКТИРОВАТЬ:

Я думаю, я вижу вашу проблему.Вы переходите к модулю с несколькими компонентами, что означает, что после ленивой загрузки используется конфигурация маршрутизатора из загруженного модуля.Это означает, что

move-request /: id

Является корневым каталогом вашего модуля, и каждый подчиненный маршрут должен включать корневой каталог модулей в URL:

Ваш маршрут должен быть move-request/:id/move-request-success

URL в лениво загруженных модулях:

корень модуля (в вашем случае move-request /: id) + настроенный маршрут конкретного компонента (в вашемcase move-request-success)

0 голосов
/ 04 июня 2018

Вам не нужно импортировать функциональный модуль в AppModule, так как он загружен лениво.Когда вы переходите к move-request/:id/move-request-success, путь соответствует маршруту по умолчанию с path:'', а затем он будет искать и дочерние элементы этого маршрута.Вы должны добавить pathMatch:'full' к первому маршруту, который в этом случае используется по умолчанию.Поскольку упомянутый маршрут соответствует первому маршруту и ​​не может найти и найти ни одного потомка, он показывает ошибку.

...