如何使用相对导航导航到 Angular 4 中的同级？

Question

我面临着延迟加载的路由器导航问题。如果有人澄清下面的问题，我将不胜感激。谢谢。

app-routing.module

const routes: Routes = [
{ path: 'home', component: HomeComponent},
{ path: Details, loadChildren: 'pathToDetailsModule'}
];

details.module.ts

const routes: Routes = [
{
  path: '', component : DetailsComponent,
   childern : [
    {path: '' , redirectTo: prodType},
    {path: prodType , loadChildren: pathtoModuleProd},
    {path: CusDetails, loadChildren: pathtoModuleCustomer},
    {path: EmpDetails, loadChildren: pathToModuleEmp}
   ]
},
];

最初，当我单击 Details (app-routing.module) 时，DetailsModule 会默认获取 load 和 DetailsComponent 并重定向到 prodType。我的页面显示 ProdType(child)。现在我想导航到 CusDetails。

问题：

#1.

这一点

currentRoute =  this.activatedRoute.snapshot.url[0].path

正在给出结果Details（父母）而不是prodType（孩子）。延迟加载模块是否添加了空路径？现在我在孩子上 -prodType并且想要导航到孩子 - CusDetails）。据我所知加载兄弟 CusDetails-

this.router.navigate(['../CusDetails'],{relativeTo: this.route}); // expected 

但在我的情况下，我使用下面的代码来加载兄弟，因为 currentRoute 是Details（父）。

this.router.navigate(['CusDetails'], { relativeTo: this.route});

为什么 currentRoute 给出结果Details而不是prodType？我将不胜感激解释。

#2.

现在说我在 CusDetail 中，我想使用导航到它的兄弟 EmpDetails

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

我们得到localhost:4200/Details/CusDetails/EmpDetails 但如果我使用下面的代码它工作正常。

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

为什么它不能与单身一起工作？

'../'

我将不胜感激解释。

Answer 1

直到 Angular v6.x，这是路由器导航中“相对链接解析”的一个已知问题。

相对路由器导航的不直观方式是 angular 团队意识到的一个错误。

这里的主要问题是路由是基于路由器配置“树”而不是 URL 路径完成的。由于无组件节点和延迟加载模块，路由配置树通常是不同的，它们在导航时添加了额外的级别（因此额外的../'s）。（更详细的解释见这里）

这个错误实际上已经在 v6.1 中得到修复（文档），但为了避免破坏已经使用 extra../的所有应用程序，修复是在功能标志之后。（请参阅此处的公关讨论）

要启用更正的相对链接解析行为，您只需将设置relativeLinkResolution设置ExtraOptions为“已更正”

IE

 RouterModule.forRoot(routes, { relativeLinkResolution: 'corrected' })

更正此行为代表着重大更改，因此更正后的设置将从 v7 开始成为默认设置（预计将在未来几周内发布 - 2018 年 10 月）。