Angular 5 - получение lazyloaded корневого маршрута модуля внутри его компонентов

Question

Есть ли способ узнать полный корневой маршрут lazyloaded модуля внутри этого?

Допустим, у меня есть lazyloaded модуль с именем ParentModule и два доступных маршрута в пределах: child1/{id1} и child2/{id2}

Вот мои объявления маршрута:

// AppRoutingModule

const routes: Routes = [
  { path: 'parent', loadChildren: './parent/parent.module#ParentModule' },
  ...
];

// ParentRoutingModule

const routes: Routes = [
  { path: '', component: ParentComponent, children: [
    { path: 'child1/:id1', component: Child1Component},
    { path: 'child2/:id2', component: Child2Component}
  ] },
  { path: '**', redirectTo: '', pathMatch: 'full'}
];

Когда я нахожусь внутри lazyloaded модуля ParentModule, я не знаю о URL, который привел к нему. ParentModule не имеет ни малейшего представления о верхнем элементе '/parent', установленном внутри AppRoutingModule.

Моя проблема в том, что я хотел бы перемещаться внутри ParentModule (от Parent до childs AND от child до child), используя уникальную командную строку (в универсальном компоненте ParentModule).

Так что я ожидал использовать

this._router.navigate(['child1', id1], {relativeTo: <?theFamousLazyModuleRootRoute?>});

или

this._router.navigate([<?theFamousLazyModuleRootRoute?>, 'child1', id1]);

Но как узнать об этом корневом маршруте? У кого-нибудь есть идея динамически получать эту информацию?

Спасибо за любую помощь, которую вы можете себе позволить.

Answer 1

Способ навигации внутри ленивого модуля с «локальным» абсолютным путем заключается в использовании this._activatedRoute.parent.

this._router.navigate(['child1', id1, {relativeTo: this._activatedRoute.parent})

В моем случае, я думаю, это работает, потому что у меня только один уровень навигации по маршруту ParentModule:

const routes: Routes = [
  { path: '', component: ParentComponent, children: [
    { path: 'child1/:id1', component: Child1Component},
    { path: 'child2/:id2', component: Child2Component}
  ] },
  { path: '**', redirectTo: '', pathMatch: 'full'}
];

Так что я могу использовать this._activatedRoute.parent везде в модуле и получить корень activatedRoute модуля.

Если у вас есть сложные вложенные маршруты в навигации вашего модуля, это может не сработать. Я не проверял.

Answer 2

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

Допустим, вы находитесь в

  /child1/add

и вы хотите перейти к

 /child/list/view/101

Вы попробуете это

  constructor(private route: ActivatedRoute,
    private router: Router) { } 
...

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

и для навигации между родителями вы можете использовать абсолютную навигацию

и если вам нужен текущий URL, попробуйте это:

this.router.url;