的问题：

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（孩子）。现在我想导航到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之前，这是a known issue，在路由器导航中具有“相对链接分辨率”。

相对的路由器导航工作的直观方式是角度小组意识到的错误。

这里的主要问题是，路由是根据路由器配置“树”而不是URL路径完成的。由于无组件节点和延迟加载的模块会在导航时增加额外的级别（因此，额外的../），因此路由配置树通常会有所不同。 (see here for a more detailed explanation)

此错误实际上在v6.1中具有already been fixed (docs)，但为避免破坏所有已经使用额外的../的应用程序，此修复程序位于功能标记后面。 (see PR discussion here)

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

即

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

更正此行为表示一项重大更改，因此，更正后的设置将是v7起的默认设置（预计将在接下来的几周内（2018年10月）发布）。

Answer 2

路由器在链接参数列表中支持类似目录的语法，以帮助指导路由名称查找：

./或没有前导斜杠相对于当前级别。

../在路线路径上升一级。

您可以将相对导航语法与祖先路径相结合。如果你必须导航到兄弟路线，你可以使用../约定上升一级，然后上下同级路径。

有关详细信息，请浏览https://angular.io/guide/router

中的相对导航主题

如何使用相对导航导航到Angular 4中的兄弟？

的问题：

2 个答案: