4

我的应用程序中有一条路线，格式为localhost/opportunity/:id/volunteers. 我想构建一个routerLink导航到同一级别的不同页面（即localhost/opportunity/:id/waitlist）。按照API 文档Routerlink中概述的选项，我得到的印象是routerLink表单中的arouterLink="./volunteers" 应该链接到我当前所在的同一页面。因此，routerLinkActiveforrouterLink="./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手动从链接中提取 ' 并将其插入（类似于routerLink="['opportunity', extractedId, 'volunteers']"），但这感觉是错误的方式，我不想:id在我的应用程序中手动提取 '。似乎我只是做错了什么。我已经搜索了一段时间，但还没有找到这个问题的答案。

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

更新：

当我尝试 arouterLink="../"时，它显示为该localhost/opportunity/:id/volunteersurl 处于活动状态，但单击该链接会将我带回主页（即localhost/）。我非常确信我的路由器只认为我的应用程序中有一个子级别（即localhost/opportunity/:id/volunteers并且localhost/calendar似乎都是 的直接子级localhost。而localhost/opportunity/:id/volunteers应该是 的直接子级localhost/opportunity/:id。我需要通过router'forChild()方法加载路由吗？将其视为子级？换router一种说法，是否有可能因为该模块的所有路由都加载在同一个forChild()块中，所以它们被视为同一级别的子级？

4

1 回答 1

5

如果当前页面是/opportunity/321/volunteers：

  • ./volunteers去/opportunity/321/volunteers/volunteers
  • volunteers去/opportunity/321/volunteers/volunteers
  • ../volunteers去/opportunity/321/volunteers
  • /volunteers去/volunteers
  • ..去/opportunity/321

您正在寻找的语法是 then ../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。

于 2017-05-04T03:15:01.583 回答