title: Angular2: Link from one child to another, on the same level
body: <p>I have a parent component A and a child component B, with A referring to B like this:</p>
  
  <pre><code>@RouteConfig([
  {
    path: '/screen-b/...',
    name: 'ScreenB',
    component: ScreenBComponent
  }
  ])
  </code></pre>
  
  <p>B has a router outlet and three sub-components, defined like this:</p>
  
  <pre><code>@RouteConfig([
    {
      path: '/screen-aa',
      name: 'ScreenAA',
      component: ScreenAAComponent,
      useAsDefault: true
    },
    {
      path: '/screen-bb',
      name: 'ScreenBB',
      component: ScreenBBComponent
    },
    {
      path: '/screen-cc',
      name: 'ScreenCC',
      component: ScreenCComponent
    }
  ])
  </code></pre>
  
  <p>When inside component B's template, I put in links like this, the sub-components AA, BB and CC show up just fine in the router outlet of B:</p>
  
  <pre><code>&lt;a [routerLink]="['ScreenAA']"&gt;Screen AA&lt;/a&gt;
  &lt;a [routerLink]="['ScreenBB']"&gt;Screen BB&lt;/a&gt;
  &lt;a [routerLink]="['ScreenCC']"&gt;Screen CC&lt;/a&gt;
  </code></pre>
  
  <p>However, when I put the same link inside AA, BB or CC, to link to one another, nothing happens (the URL in the address bar does change, though). I am guessing that this is because AA, BB, CC do not have router outlets themselves, and this is where Angular2 would want to put them.</p>
  
  <p>It seems that it is only possible to route down the hierarchy, and always only in a lower-level router outlet, but never to the same level, or above. How to achieve this functionality that is so essential for most websites?</p>
  
  <p>All I need is to be able to click inside a component and then have that component be replaced with something else, not open up something in a lower-level router outlet.</p>