Dan Dan - 27 days ago 13
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:

@Component({
selector: 'my-dashboard',
template: `
<div class="tree-panel-container">
<div class="tree-panel-content">
<content-tree [startNodeId]="startNodeIdContent"></content-tree>
</div>
</div>
<router-outlet></router-outlet>
`,
directives: [
ContentTreeComponent,
ContentDashboardComponent,
RouterOutlet
],
providers: [
HTTP_PROVIDERS
]
})


The editable content is rendered in a
router-outlet
so that each editable piece of content has its own distinct URL e.g.
example.com/content/edit/123
where
123
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
id
route parameter in the
content-tree
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';


@Component({
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>
<a class="tree__branch__link" (click)="onSelect(contentNode)">{{ contentNode.Name }}</a>
<content-tree *ngIf="contentNode.toggle" [startNodeId]="contentNode.Id"></content-tree>
</li>
</ol>
<div class="error" *ngIf="errorMessage">{{errorMessage}}</div>
`
})
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 => this.contentNodes = contentNodes,
error => this.errorMessage = <any>error
);
}
}


But the
nodeId
variable in the
ngOnInit
method is always returned as
0
.

Questions:
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.

EDIT:

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

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

Comments