title: Angular2: Just update the last segment of a route
body: <p>I've got a route in my app in the form <code>localhost/opportunity/:id/volunteers</code>. I want to build a <code>routerLink</code> to navigate to different pages on the same level (i.e. <code>localhost/opportunity/:id/waitlist</code>). Following the options outlined in the <a href="https://angular.io/docs/ts/latest/api/router/index/RouterLink-directive.html" rel="nofollow noreferrer">API documentation for <code>Routerlink</code></a>, the impression I get is that a <code>routerLink</code> in the form <code>routerLink="./volunteers"</code> <em>should</em> link to the same page I am currently on. Therefore, <code>routerLinkActive</code> for <code>routerLink="./volunteers"</code> should indicate the link is active. But it doesn't do that...</p>
  
  <p>The relevant routes look like this:</p>
  
  <pre><code>const routes: Routes = [
    {
      path: 'opportunity',
      children: [
        {
          path: ':id',
          children: [
            {
              path: 'volunteers',
              component: VolunteersComponent
            },
            {
              path: 'waitlist',
              component: WaitlistComponent
            },
            {
               etc . . .
            }
          ]
        }
      ]
    }
  ];
  </code></pre>
  
  <p>The <code>routerLink="./volunteers"</code> appears to navigate to <code>localhost/volunteers</code>, which doesn't exist. I've also tried links in the form <code>routerLink="../../volunteers"</code>, <code>routerLink="../volunteers"</code>, <code>routerLink="././volunteers"</code>, etc (they don't work either, not that I thought they would).</p>
  
  <p>Any suggestions on what I'm doing wrong? Obviously, I could extract the <code>:id</code> from the link manually and insert it (something like <code>routerLink="['opportunity', extractedId, 'volunteers']"</code>) but that feels like the wrong way and I'd like to not have to manually extract the <code>:id</code>'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.</p>
  
  <p><em>Small edit: let me also say that this module is loaded directly into the root module.</em></p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>When I try a <code>routerLink="../"</code>, it shows as active for the <code>localhost/opportunity/:id/volunteers</code> url, but clicking on the link takes me back to the home page (i.e. <code>localhost/</code>). I'm pretty convinced that my router only thinks there is one child level in my app (i.e. <code>localhost/opportunity/:id/volunteers</code> and <code>localhost/calendar</code> appear to both be direct children of <code>localhost</code>. While <code>localhost/opportunity/:id/volunteers</code> should be a direct child of <code>localhost/opportunity/:id</code>. Do I need to load a route through through the <code>router</code>'s <code>forChild()</code> method for the <code>router</code> 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 <code>forChild()</code> block, they're being treated as the same level of child?</p>