Question

我的应用中有localhost/opportunity/:id/volunteers形式的路线。我想构建一个routerLink来导航到同一级别的不同页面（即localhost/opportunity/:id/waitlist）。根据{{3}}中列出的选项，我得到的印象是routerLink 形式的routerLink="./volunteers"应该链接到我当前所在的同一页面。因此，routerLinkActive的{{1}}应表明该链接处于活动状态。但它没有那样做......

相关路线如下：

routerLink="./volunteers"

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），但感觉方式错误，我不想手动提取{{1}我的应用程序遍布各处。我似乎只是做错了什么。我搜索了S.O.有一段时间了，但还没有找到这个问题的答案。

小编辑：我还要说这个模块直接加载到根模块中。

更新

当我尝试routerLink="['opportunity', extractedId, 'volunteers']"时，它会显示为:id网址的有效状态，但点击该链接会将我带回主页（即routerLink="../"）。我非常确信我的路由器只认为我的应用中有一个子级别（即localhost/opportunity/:id/volunteers和localhost/似乎都是localhost/opportunity/:id/volunteers的直接子级。localhost/calendar应该是localhost的直接孩子。我是否需要通过localhost/opportunity/:id/volunteers的{{1}}方法为localhost/opportunity/:id加载一条路线，以便将其视为孩子？另一种方式，是否有可能因为所有这个模块的路由被加载到同一个router块中，它们被视为同一级别的孩子？

Answer 1

如果当前页面为/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进入<router-outlet>内的OpportunityComponent。

Angular2：只需更新路线的最后一段

1 个答案: