Angular 5-在其组件内部获取延迟加载的模块根路由 [英] Angular 5 - getting a lazyloaded module root route inside of its components

问题描述

是否有办法知道延迟加载的模块内部的完整根路由?

假设我有一个名为 ParentModule 的延迟加载模块，并且其中包含两个可用的路由: child1/{id1} 和 child2/{id2}

这是我的路线声明:

 //AppRoutingModuleconst路线:路线= [{path:'parent'，loadChildren:'./parent/parent.module#ParentModule'}，...];//ParentRoutingModuleconst路线:路线= [{path:，组件:ParentComponent，子代:[{path:'child1/:id1'，component:Child1Component}，{路径:"child2/:id2"，组件:Child2Component}]}，{path:'**'，redirectTo:``，pathMatch:'full'}]; 

当我在延迟加载的模块ParentModule中时，我不知道导致它的URL.ParentModule不了解AppRoutingModule内部的'/parent'上层代码.

我的问题是我想使用唯一的命令行(在通用的 ParentModule 中，在ParentModule内部(从父级到子级 AND 从子级到子级)导航的组件).

所以我希望使用

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

或

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

但是如何知道这个根路径?有人有想法动态获取此信息吗?

感谢您能提供的任何帮助.

解决方案

使用本地"绝对路径在延迟加载的模块中导航的方法是使用 this._activatedRoute.parent .

>

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

在我看来，这是可行的，因为在ParentModule路线下，我只有一个导航级别:

  const路由:路由= [{path:"，组件:ParentComponent，子代:[{path:'child1/:id1'，component:Child1Component}，{路径:"child2/:id2"，组件:Child2Component}]}，{path:'**'，redirectTo:``，pathMatch:'full'}]; 

因此，我可以在模块中的任何地方使用 this._activatedRoute.parent 并到达模块的根 activatedRoute .

如果模块导航中有复杂的嵌套路线，则此方法可能无效.我没有测试.

Is there a way to know the full root route of a lazyloaded module inside of it ?

Let's say I have a lazyloaded module called ParentModule, and two available routes within: child1/{id1} and child2/{id2}

Here are my route declarations :

// 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'}
];

When I am inside the lazyloaded module ParentModule, I don't know about the url that led to it. ParentModule has no clue about the '/parent' set upper, inside the AppRoutingModule.

My problem is that I would like to navigate inside the ParentModule (from Parent to childs AND from child to child) using a unique command line (in a generic ParentModule's component).

So I expected to use

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

or

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

But how to know about this root route ? Does somebody has an idea to dynamically get this info ?

Thanks for any help you could afford.

解决方案

The way to navigate inside a lazyloaded module with "local" absolute path is to use the this._activatedRoute.parent.

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

In my case I guess it works because I only have a single level of navigation under the ParentModule route :

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

So I can use this._activatedRoute.parent everywhere in the module and reach the root activatedRoute of the module.

If you have complex nested routes in your module navigation, this may not work. I did not test.

这篇关于Angular 5-在其组件内部获取延迟加载的模块根路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！