gpt4 book ai didi

angular - 如何使用相对导航导航到 Angular 4 中的同级?

转载 作者:行者123 更新时间:2023-12-02 00:34:01 25 4
gpt4 key购买 nike

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

应用程序路由模块

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

细节.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 获取加载和 DetailsComponent,并默认重定向到 prodType。我的页面显示 ProdType(child)。现在我想导航到 CusDetails。

问题:

#1.

此时

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

给出结果 Details(parent)而不是 prodType(child)。延迟加载模块是否添加了空路径?现在我在 Child - prodType 上并想导航到 child - CusDetails )。据我所知加载兄弟 CusDetails-

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

但在我的例子中,我使用下面的代码来加载同级,因为 currentRoute 是 Details(parent)。

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});

为什么它不适用于 single?

'../'

我将不胜感激。

最佳答案

对于 Angular v6.x,这是 a known issue在路由器导航中使用“相对链接解析”。

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

这里的主要问题是路由是基于路由器配置“树”而不是 URL 路径完成的。由于无组件节点和惰性加载模块在导航时添加额外级别(因此额外的 ../),路由配置树通常是不同的。 (see here for a more detailed explanation)

这个bug实际上有already been fixed (docs)在 v6.1 中,但为了避免破坏所有已经使用额外的 ../ 的应用程序,修复是在功能标志后面。 (see PR discussion here)

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

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

更正此行为是一项重大更改,因此更正后的设置将从 v7 开始成为默认设置(预计将在未来几周内发布 - 2018 年 10 月)。

关于angular - 如何使用相对导航导航到 Angular 4 中的同级?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50503577/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com