Angular 5 - 在其组件中获取延迟加载的模块根路由

Question

有没有办法知道延迟加载模块里面的完整根路由？

假设我有一个名为 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' set upper 没有任何线索。

我的问题是我想使用独特的命令行（在通用 ParentModule的组成部分）。

所以我希望使用

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

或

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

但是如何知道这个根路由呢？有人有动态获取此信息的想法吗？

感谢您提供的任何帮助。

Answer 1

你不需要知道在 lazyLoading 中 children 之间导航的完整路径，你可以使用相对导航和 ../ 在你的路径中上一级，如果你使用绝对路径你将需要对所有组件进行更改，以防 parent 路线发生变化

假设您在

  /child1/add

并且您想导航到

 /child/list/view/101

你试试这个

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

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

要在 parent 之间导航，您可以使用绝对导航

如果您需要当前的 url 试试这个：

this.router.url;

Answer 2

使用 "local" 绝对路径在惰性加载模块中导航的方法是使用 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。

如果您的模块导航中有复杂的嵌套路由，这可能不起作用。我没有测试。

Angular 5 - 在其组件中获取延迟加载的模块根路由

Angular 5 - getting a lazyloaded module root route inside of its components

navigation

router

lazy-loading

angular