Dan Dan - 1 year ago 248
TypeScript Question

Angular2 Get router params outside of router-outlet

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.

e.g. The tree is like this:

- Football
- - Premier League
- - - Arsenal
- - - Chelsea
- - - ...etc
- - Championship
- - - Derby
- - - ...etc

You click 'Arsenal' in the tree and it renders some content for that team in an editable panel on the page.

The component which renders the sub-components is like this:

selector: 'my-dashboard',
template: `
<div class="tree-panel-container">
<div class="tree-panel-content">
<content-tree [startNodeId]="startNodeIdContent"></content-tree>
directives: [
providers: [

The editable content is rendered in a
so that each editable piece of content has its own distinct URL e.g.
is the id of the Arsenal content, for example.

This all works fine.

However, what I want to do is be able to access the
route parameter in the
component. Currently, I'm pretty sure the code I have in that component should work:

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';

selector: 'content-tree',
directives: [ContentTreeComponent],
template: `
<ol class="tree">
<li *ngFor="let contentNode of contentNodes" class="tree__branch" [ngClass]="{'tree__branch--has-children': contentNode.HasChildren}">
<a *ngIf="contentNode.HasChildren" (click)="contentNode.toggle=!contentNode.toggle" class="tree__branch__toggle">
{{ !!contentNode.toggle ? '-' : '+' }}
<a class="tree__branch__link" (click)="onSelect(contentNode)">{{ contentNode.Name }}</a>
<content-tree *ngIf="contentNode.toggle" [startNodeId]="contentNode.Id"></content-tree>
<div class="error" *ngIf="errorMessage">{{errorMessage}}</div>
export class ContentTreeComponent implements OnInit {

private _contentService: ContentService,
private _router: Router,
private _routeParams: RouteParams
) { }

errorMessage: string;

private _startNodeId: number;

contentNodes: ContentNode[];

ngOnInit() {
let nodeId = +this._routeParams.get('id');
console.log('nodeId = ' + nodeId);

onSelect(contentNode: ContentNode) {
this._router.navigate( ['ContentEdit', { id: contentNode.Id }] );

getContentNodes() {
contentNodes => this.contentNodes = contentNodes,
error => this.errorMessage = <any>error

But the
variable in the
method is always returned as

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?

Many thanks.


A working (and very ugly ;)) Plnkr has now been generated to show the basics of the app: http://plnkr.co/edit/W3PVk3Ss5Wq59IbnLjaK?p=preview. See comments for what is supposed to happen...

Answer Source

In the new router (>= RC.0 <=RC.2) this would be

  import 'rxjs/add/operator/first';

  constructor(private router:Router, private routeSerializer:RouterUrlSerializer, private location:Location) {
    router.changes.first().subscribe(() => {

    let urlTree = this.routeSerializer.parse(location.path());
      console.log('id', urlTree.children(urlTree.children(urlTree.root)[0])[0].segment);

See also Angular 2 RC1: Get parameters from the initial URL used

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download