Angular2:只更新路线的最后一段
我在我的应用程序中有localhost/opportunity/:id/volunteers
的路线。我想构建一个routerLink
以导航到同一级别上的不同页面(即localhost/opportunity/:id/waitlist
)。按照API documentation for Routerlink
中列出的选项,我得到的印象是routerLink="./volunteers"
应该链接到我目前所在的同一页面上的routerLink
。因此,routerLinkActive
为routerLink="./volunteers"
应指示链接处于活动状态。不过,这并不这样做...Angular2:只更新路线的最后一段
相关的路线是这样的:
const routes: Routes = [
{
path: 'opportunity',
children: [
{
path: ':id',
children: [
{
path: 'volunteers',
component: VolunteersComponent
},
{
path: 'waitlist',
component: WaitlistComponent
},
{
etc . . .
}
]
}
]
}
];
的routerLink="./volunteers"
似乎导航到localhost/volunteers
,它不存在。我也试过routerLink="../../volunteers"
,routerLink="../volunteers"
,routerLink="././volunteers"
等形式的链接(他们也不行,不是我认为他们会这么做)。
关于我在做什么的任何建议是错误的?很明显,我可以从链接中手动提取:id
并插入它(类似routerLink="['opportunity', extractedId, 'volunteers']"
),但感觉像是错误的方式,我不想在我的应用程序中手动提取:id
。我似乎可能只是在做错事。我搜索了S.O.一段时间,但还没有找到这个问题的答案。
小编辑:让我也说这个模块直接加载到根模块。
UPDATE:
当我尝试routerLink="../"
,它显示了localhost/opportunity/:id/volunteers
网址为活跃,但点击链接把我带回到主页(即localhost/
)。我很确信我的路由器只认为我的应用中有一个子级别(即localhost/opportunity/:id/volunteers
和localhost/calendar
似乎都是localhost
的直接子代,而localhost/opportunity/:id/volunteers
应该是localhost/opportunity/:id
的直接子代。是否需要加载路由通过router
的forChild()
方法为router
查看它作为一个孩子吗?换言之,有可能是因为这个模块的所有路由都加载在相同的forChild()
块中,它们被视为同一级别的孩子
如果当前页面/opportunity/321/volunteers
:
-
./volunteers
去/opportunity/321/volunteers/volunteers
-
volunteers
去/opportunity/321/volunteers/volunteers
-
../volunteers
去/opportunity/321/volunteers
-
/volunteers
去/volunteers
-
..
去/opportunity/321
你正在寻找的语法然后../volunteers
。
更新
你的配置是错误的。
通过单一<router-outlet>
,它应该是:
const routes: Routes = [
{
path: 'opportunity/:id/volunteers',
component: VolunteersComponent
},
{
path: 'opportunity/:id/waitlist',
component: WaitlistComponent
},
{
etc . . .
}
];
您可以使用一个孩子<router-outlet>
有:
const routes: Routes = [
{
path: 'opportunity/:id',
component: OpportunityComponent
children: [
{
path: 'volunteers',
component: VolunteersComponent
},
{
path: 'waitlist',
component: WaitlistComponent
},
{
etc . . .
}
]
},
{
etc . . .
}
];
然后,您需要一个OpportunityComponent
其HTML必须包含另一个<router-outlet>
OpportunityComponent
然后进入应用程序<router-outlet>
,并且VolunteersComponent
进入OpportunityComponent
内的<router-outlet>
。
感谢您的回复!我试过了。它不起作用。它绝对看起来应该是这样,这就是为什么我包括我的路线,以防我有一些配置,我错过了? – John
好吧,这很奇怪。你的问题促使我尝试一个'routerLink =“../”'。这个routerLink显示为'localhost/opportunity /:id/volunteers' url的激活状态,但是*链接上的*点击会让我回到主页(只是'localhost /')。我相当确信我的路由器只认为我的应用中有一个子级(即'localhost/opportunity /:id/volunteers'和'localhost/calendar'都是'localhost'的直接子节点。期望'localhost/opportunity /:id/volunteers'是'localhost/opportunity /:id'的子节点。 – John