Angular 5-在其組件內部獲取延遲加載的模塊根路由

Question

有沒有辦法知道它里面 lazyloaded模塊的完整的根路徑？

假設我有一個名為ParentModule的延遲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'}
];

當我在延遲加載的模塊ParentModule中時，我不知道導致它的URL。 ParentModule對AppRoutingModule內部的'/parent'設置上限沒有任何了解。

我的問題是，我想使用唯一的命令行（在通用ParentModule的組件中）在ParentModule（從Parent到childs ，從child到child）中ParentModule 。

所以我期望使用

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

要么

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

但是如何知道這個根路徑？ 有人有想法動態獲取此信息嗎？

感謝您提供的任何幫助。

Answer 1

您不需要知道在lazyLoading中子級之間導航的完整路徑，可以使用相對導航和../在路徑中向上移動，如果使用絕對路徑，則需要在所有組件中進行更改如果父母路線改變

可以說你在

  /child1/add

而您想導航到

 /child/list/view/101

你試試這個

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

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

要在父母之間導航，您可以使用絕對導航

如果您需要當前網址，請嘗試以下操作：

this.router.url;

Answer 2

在具有“本地”絕對路徑的this._activatedRoute.parent模塊內部進行導航的方法是使用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模塊。

如果模塊導航中有復雜的嵌套路線，則可能不起作用。 我沒有測試。