Angular2: Just update the last segment of a route

Question

I've got a route in my app in the form localhost/opportunity/:id/volunteers. I want to build a routerLink to navigate to different pages on the same level (i.e. localhost/opportunity/:id/waitlist). Following the options outlined in the API documentation for Routerlink, the impression I get is that a routerLink in the form routerLink="./volunteers" should link to the same page I am currently on. Therefore, routerLinkActive for routerLink="./volunteers" should indicate the link is active. But it doesn't do that...

The relevant routes look like this:

const routes: Routes = [
  {
    path: 'opportunity',
    children: [
      {
        path: ':id',
        children: [
          {
            path: 'volunteers',
            component: VolunteersComponent
          },
          {
            path: 'waitlist',
            component: WaitlistComponent
          },
          {
             etc . . .
          }
        ]
      }
    ]
  }
];

The routerLink="./volunteers" appears to navigate to localhost/volunteers, which doesn't exist. I've also tried links in the form routerLink="../../volunteers", routerLink="../volunteers", routerLink="././volunteers", etc (they don't work either, not that I thought they would).

Any suggestions on what I'm doing wrong? Obviously, I could extract the :id from the link manually and insert it (something like routerLink="['opportunity', extractedId, 'volunteers']") but that feels like the wrong way and I'd like to not have to manually extract the :id's all over my app. It seems likely I'm just doing something wrong. I've searched S.O. for a while, but haven't found an answer to this question.

Small edit: let me also say that this module is loaded directly into the root module.

UPDATE:

When I try a routerLink="../", it shows as active for the localhost/opportunity/:id/volunteers url, but clicking on the link takes me back to the home page (i.e. localhost/). I'm pretty convinced that my router only thinks there is one child level in my app (i.e. localhost/opportunity/:id/volunteers and localhost/calendar appear to both be direct children of localhost. While localhost/opportunity/:id/volunteers should be a direct child of localhost/opportunity/:id. Do I need to load a route through through the router's forChild() method for the router to view it as a child? Said another way, is it possible that, because all of this module's routes are loaded in the same forChild() block, they're being treated as the same level of child?

Answer 1

If the current page is /opportunity/321/volunteers:

• ./volunteers goes to /opportunity/321/volunteers/volunteers
• volunteers goes to /opportunity/321/volunteers/volunteers
• ../volunteers goes to /opportunity/321/volunteers
• /volunteers goes to /volunteers
• .. goes to /opportunity/321

The syntax you are looking for is then ../volunteers.

Update

Your configuration is wrong.

With a single <router-outlet>, it should be:

const routes: Routes = [
  {
    path: 'opportunity/:id/volunteers',
    component: VolunteersComponent
  },
  {
    path: 'opportunity/:id/waitlist',
    component: WaitlistComponent
  },
  {
    etc . . .
  }
];

You can use a child <router-outlet> with:

const routes: Routes = [
  {
    path: 'opportunity/:id',
    component: OpportunityComponent
    children: [
      {
        path: 'volunteers',
        component: VolunteersComponent
      },
      {
        path: 'waitlist',
        component: WaitlistComponent
      },
      {
         etc . . .
      }
    ]
  },
  {
    etc . . .
  }
];

You then need an OpportunityComponent whose html must contain another <router-outlet>

The OpportunityComponent then goes into the app <router-outlet>, and the VolunteersComponent goes into the <router-outlet> inside the OpportunityComponent.