Angular 2: getting RouteParams from parent component

Question

How do I get the RouteParams from a parent component?

App.ts:

@Component({   ... })  @RouteConfig([   {path: '/', component: HomeComponent, as: 'Home'},   {path: '/:username/...', component: ParentComponent, as: 'Parent'} ])  export class HomeComponent {   ... } 

And then, in the ParentComponent, I can easily get my username param and set the child routes.

Parent.ts:

@Component({   ... })  @RouteConfig([   { path: '/child-1', component: ChildOneComponent, as: 'ChildOne' },   { path: '/child-2', component: ChildTwoComponent, as: 'ChildTwo' } ])  export class ParentComponent {    public username: string;    constructor(     public params: RouteParams   ) {     this.username = params.get('username');   }    ... } 

But then, how can I get this same 'username' parameter in those child components? Doing the same trick as above, doesn't do it. Because those params are defined at the ProfileComponent or something??

@Component({   ... })  export class ChildOneComponent {    public username: string;    constructor(     public params: RouteParams   ) {     this.username = params.get('username');     // returns null   }    ... } 

Answer 1

UPDATE:

Now that Angular2 final was officially released, the correct way to do this is the following:

export class ChildComponent {      private sub: any;      private parentRouteId: number;      constructor(private route: ActivatedRoute) { }      ngOnInit() {         this.sub = this.route.parent.params.subscribe(params => {             this.parentRouteId = +params["id"];         });     }      ngOnDestroy() {         this.sub.unsubscribe();     } } 

---

ORIGINAL:

Here is how i did it using the "@angular/router": "3.0.0-alpha.6" package:

export class ChildComponent {      private sub: any;      private parentRouteId: number;      constructor(         private router: Router,         private route: ActivatedRoute) {     }      ngOnInit() {         this.sub = this.router.routerState.parent(this.route).params.subscribe(params => {             this.parentRouteId = +params["id"];         });     }      ngOnDestroy() {         this.sub.unsubscribe();     } } 

In this example the route has the following format: /parent/:id/child/:childid

export const routes: RouterConfig = [     {         path: '/parent/:id',         component: ParentComponent,         children: [             { path: '/child/:childid', component: ChildComponent }]     } ]; 

Answer 2

You shouldn't try to use RouteParams in your ChildOneComponent.

Use RouteRegistry, instead!

@Component({   ... })  export class ChildOneComponent {    public username: string;    constructor(registry: RouteRegistry, location: Location) {     route_registry.recognize(location.path(), []).then((instruction) => {       console.log(instruction.component.params['username']);     })   }     ... } 

UPDATE: As from this pull request (angular beta.9): https://github.com/angular/angular/pull/7163

You can now access to the current instruction without recognize(location.path(), []).

Example:

@Component({   ... })  export class ChildOneComponent {    public username: string;    constructor(_router: Router) {     let instruction = _router.currentInstruction();     this.username = instruction.component.params['username'];   }    ... } 

I haven't tried it, yet

Further details here:

https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta9-2016-03-09 https://angular.io/docs/ts/latest/api/router/Router-class.html

UPDATE 2: A small change as from angular 2.0.0.beta15:

Now currentInstruction is not a function anymore. Moreover, you have to load the root router. (thanks to @Lxrd-AJ for reporting)

@Component({   ... })  export class ChildOneComponent {    public username: string;    constructor(_router: Router) {     let instruction = _router.root.currentInstruction;     this.username = instruction.component.params['username'];   }    ... }