функция this.router.navigate не работает должным образом

Question

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

app-routing.module.ts

...
const routes: Routes = [
   {
      path: :id,
      component: ParentComponent,
      children: [
         { path: 'child', loadChildren: './child.module#ChildModule' }
      ]
   }
]
...

child-routing.module.ts

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

Теперь у нас есть маршрутизация этими способами. foo.com/123/child/child1 -> Child1Component foo.com/123/child/child2 -> Child2Component

Здесь я попытался перейти на страницу foo.com/123/child/child2 внутри Child1Component. Я думал, что дочерний модуль отделен от модуля приложения, и он загружен лениво, поэтому этот код будет работать правильно.

child2.component.ts

...
constructor(private router: Router) {}

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

Но однаждыЯ запустил приложение, оно перешло на foo.com/child/child2. Я ожидал, что foo.com/123/child/child2.

Если я внесу эти изменения, он будет работать, как и ожидалось.

child2.component.ts

...
private parentId;
constructor(private router: Router, private route: ActivatedRoute) {
   this.route.parent.parent.params.subscribe((params) => {this.parentId = params.id});
}

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

Он получает parentId из URL-адреса внутри компонента и перемещается по нему. Но мне не нравится этот подход, потому что он не масштабируется. Если я изменю имя параметра Route Param или добавлю еще несколько параметров маршрутизации, мне придется также обновить дочерние компоненты для маршрутизации.

Есть ли лучший подход для обработки маршрутизации в дочерних компонентах, определенных для дочерних модулей с отложенной загрузкой?

Answer 1

Согласно Угловые документы

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

, а также для угловых документов ,

Маршрутизатор поддерживает синтаксис, похожий на каталог всписок параметров ссылки, помогающий при поиске имени маршрута:

. / или нет косой черты относительно текущего уровня.

.. / для перехода на один уровень вверх по маршруту.

Вы можете объединить относительный синтаксис навигации с путем предка. Если вам необходимо перейти на маршрут одного уровня, вы можете использовать соглашение ../ для перехода на один уровень вверх, а затем вверх и вниз по маршруту маршрута одного уровня.

Таким образом, вы можете работать с относительными маршрутами, например:для примера Angular

this.router.navigate(['../', { id: crisisId, foo: 'foo' }], { relativeTo: this.route });

Где this.route - это экземпляр ActivatedRoute.