title: Angular2 Get router params outside of router-outlet
body: <p>I have a dashboard application which consists of a treeview component (which lists various content nodes) and a dashboard-edit component which renders some editable content depending on which branch of the tree is selected.</p>
  
  <p>e.g. The tree is like this:</p>
  
  <pre><code>- Football
  - - Premier League
  - - - Arsenal
  - - - Chelsea
  - - - ...etc
  - - Championship
  - - - Derby
  - - - ...etc
  </code></pre>
  
  <p>You click 'Arsenal' in the tree and it renders some content for that team in an editable panel on the page.</p>
  
  <p>The component which renders the sub-components is like this:</p>
  
  <pre><code>@Component({
      selector: 'my-dashboard',
      template: `
          &lt;div class="tree-panel-container"&gt;
              &lt;div class="tree-panel-content"&gt;
                  &lt;content-tree [startNodeId]="startNodeIdContent"&gt;&lt;/content-tree&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
      `,
      directives: [
          ContentTreeComponent, 
          ContentDashboardComponent, 
          RouterOutlet
      ],
      providers: [
          HTTP_PROVIDERS
      ]
  })
  </code></pre>
  
  <p>The editable content is rendered in a <code>router-outlet</code> so that each editable piece of content has its own distinct URL e.g. <code>example.com/content/edit/123</code> where <code>123</code> is the id of the Arsenal content, for example.</p>
  
  <p>This all works fine.</p>
  
  <p>However, what I want to do is be able to access the <code>id</code> route parameter in the <code>content-tree</code> component.  Currently, I'm pretty sure the code I have in that component <em>should</em> work:</p>
  
  <pre><code>import {Component, Input, OnInit}   from '@angular/core';
  import {Router, RouteParams}        from '@angular/router-deprecated';
  
  import {ContentNode}                from './content-node';
  import {ContentService}             from '../services/content.service';
  
  
  @Component({
      selector: 'content-tree',
      directives: [ContentTreeComponent],
      template: `
          &lt;ol class="tree"&gt;
              &lt;li *ngFor="let contentNode of contentNodes" class="tree__branch" [ngClass]="{'tree__branch--has-children': contentNode.HasChildren}"&gt;
                  &lt;a *ngIf="contentNode.HasChildren" (click)="contentNode.toggle=!contentNode.toggle" class="tree__branch__toggle"&gt;
                      {{ !!contentNode.toggle ? '-' : '+' }}
                  &lt;/a&gt; 
                  &lt;a class="tree__branch__link" (click)="onSelect(contentNode)"&gt;{{ contentNode.Name }}&lt;/a&gt;
                  &lt;content-tree *ngIf="contentNode.toggle" [startNodeId]="contentNode.Id"&gt;&lt;/content-tree&gt;
              &lt;/li&gt;
          &lt;/ol&gt;
          &lt;div class="error" *ngIf="errorMessage"&gt;{{errorMessage}}&lt;/div&gt;
      `
  })
  export class ContentTreeComponent implements OnInit {
  
      constructor(
          private _contentService: ContentService,
          private _router: Router,
          private _routeParams: RouteParams
      ) { }
  
      errorMessage: string;
  
      @Input('startNodeId')
      private _startNodeId: number;
  
      contentNodes: ContentNode[];
  
      ngOnInit() { 
          let nodeId = +this._routeParams.get('id');
          console.log('nodeId = ' + nodeId);
          this.getContentNodes();
      }
  
      onSelect(contentNode: ContentNode) {
          this._router.navigate( ['ContentEdit', { id: contentNode.Id }]  );
      }
  
      getContentNodes() {
          this._contentService.getContentNodes(this._startNodeId)
              .subscribe(
                  contentNodes =&gt; this.contentNodes = contentNodes,
                  error =&gt;  this.errorMessage = &lt;any&gt;error
              );
      }
  }
  </code></pre>
  
  <p>But the <code>nodeId</code> variable in the <code>ngOnInit</code> method is always returned as <code>0</code>.</p>
  
  <p><strong>Questions:</strong> 
  Is it only possible to access route params in a component rendered by a router-outlet?  If so, then is the best method to deal with this to create a second (named, because there will now be 2) router-outlet?  If not, then what am I doing wrong?</p>
  
  <p>Many thanks.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>A working (and very ugly ;)) Plnkr has now been generated to show the basics of the app: <a href="http://plnkr.co/edit/W3PVk3Ss5Wq59IbnLjaK?p=preview" rel="noreferrer">http://plnkr.co/edit/W3PVk3Ss5Wq59IbnLjaK?p=preview</a>.  See comments for what is supposed to happen...</p>