Question

有没有办法知道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对AppRoutingModule中'/parent' set upper没有任何线索。

我的问题是我想使用一个独特的命令行（在通用ParentModule＆＃39中导航到ParentModule内部（从Parent到childs AND 从子到子） ; s组件）。

所以我希望使用

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

使用“本地”绝对路径在lazyloaded模块内导航的方法是使用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 - 在其组件内部获取延迟加载的模块根路由

2 个答案: