Как правильно настроить маршрутизацию в динамически загруженном модуле Angular?

Question

У меня есть приложение с выходом маршрутизатора, в котором я хочу лениво загрузить модули со своими собственными под-маршрутами.

Это должно дать маршруты:

/
/lazy1/child1
/lazy1/child2

in модуль приложения root, я определяю некоторые маршруты, которые будут загружать дочерний модуль

export const routes: Routes = [
  {path:'', component: HelloComponent},
  {path: 'lazy1', loadChildren: () => import('./lazy1-module/index').then(mod => mod.Lazy1Module)}
];

, а в модуле Lazy1Module следующие маршруты

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

, которые я добавляю с помощью RouterModule .forChild (маршруты) как обычно.

Кажется, это работает нормально, и когда я go в / lazy1 / child1, это разрешается нормально.

Однако, когда я пытаюсь перемещаться между Чайлдс, я сталкиваюсь с неприятностями. Поскольку модуль с отложенной загрузкой сам по себе не должен знать или заботиться о маршрутах вне себя, я предполагаю, что я мог бы перейти от child1 к child2, используя

this.router.navigate(["child2"]);

Это приводит к ошибке «маршрут не найден» .

Я могу заставить его работать, добавив

this.router.navigate(["child2"], { relativeTo: this.route.parent });

Но это кажется неправильным. также "../child2" не работает.

При добавлении регистрации в маршрутизатор, кажется, что он добавляет "/" перед маршрутом и начинает разрешать его из root, также не обращая внимания на любые точки .

Я использую Angular 8.2.14

Пример Stackblitz здесь: https://stackblitz.com/edit/angular-bqdchr

Answer 1

Вы можете перемещаться по абсолютным или относительным путям.

this.router.navigate(['child2']);

использует абсолютный путь (поскольку нет флага relativeTo) и переходит к /child2. Для /child2 не определен маршрут, но для /lazy1/child2.

. Ошибка консоли сообщает, что:

Ошибка: невозможно сопоставить ни один маршрут. Сегмент URL: 'child2'

Это сработало бы, если бы вы переписали его следующим образом:

this.router.navigate(['lazy1', 'child2']);

В вашем рабочем примере используется относительный путь:

this.router.navigate(["child2"], { relativeTo: this.route.parent });

Родитель вашего текущего маршрута lazy. Оттуда вы переходите к child2, который является действительным маршрутом (/lazy/child2).

См. https://angular.io/api/router/Router#navigate для получения дополнительной информации. Интересно также следующее: https://angular.io/guide/router#router -links

Answer 2

Ваши маршруты ленивые как:

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

Тогда вы можете сделать

this.router.navigate(["child2"], { relativeTo: this.route.parent });
//or
this.router.navigate(["../child2"],{ relativeTo: this.route});

Answer 3

Взгляните на этот stackblitz:

Я думаю, это потому, что ваши ленивые маршруты не знают, что он root, поэтому вам нужно добавить:

path:'', component: LazyComponent, children: [
  { path: 'child1', component: Child1Component },
  { path: 'child2', component: Child2Component }
]