Getting routerParams send from parent with child

Question

I have a component which has a @Routeconfig (the parent).

import {Component} from "angular2/core";
import {RouteConfig,ROUTER_DIRECTIVES, RouterOutlet} from 'angular2/router';
import {Theme} from "../theme/theme";
import {Router,RouteParams} from "angular2/router";
import {OrganisationService} from "./organisation.service";
import {Organisation} from "./organisation";
import {OrganisationComponent} from "./organisation.component";
import {EmptyComponent} from "../../empty.component";
import {ThemeListComponent} from "../theme/theme-list.component";

@Component({
    template: `
<div class="container">
    <ul>
        <li *ngFor="#organisation of organisations">
             <a [routerLink]="['./ThemeList',{ organisationId: organisation.organisationId }]" >{{organisation.organisationName}}</a>
        </li>
    </ul>
</div>
<router-outlet></router-outlet>
  `,
    directives:[RouterOutlet],
    providers:[OrganisationService]
})

@RouteConfig([
    {path: '/', name:'Empty', component:EmptyComponent,useAsDefault: true},
    {path: '/:organisationId/Themes/...', name:'ThemeList', component:ThemeListComponent}
])

export class OrganisationListComponent {
    public organisations:Organisation[];
    constructor(private organisationService:OrganisationService) {
        this.organisationService.getOrganisations().subscribe((organisations:Organisation[])=> {
            this.organisations = organisations;
        });
    }
}

I want to sent the id from organisation to my ThemeListComponent (child). This works but when i try to get the routeParams withing my child component it gives errors.

EXCEPTION: Error during instantiation of Router! (RouterLink -> Router).

ORIGINAL EXCEPTION: Route config should contain exactly one "component", "loader", or "redirectTo" property.

This is ThemeListComponent and how i try to receive the routerParams:

import {Component} from "angular2/core";
import {RouteConfig,ROUTER_DIRECTIVES, RouterOutlet} from 'angular2/router';
import {Theme} from "../theme/theme";
import {Router,RouteParams} from "angular2/router";
import {ThemeComponent} from "../theme/theme.component";
import {ThemeService} from "./theme.service";
import {EmptyComponent} from "../../empty.component";

@Component({
    template: `
<div class="container">
  <ul>
     <li *ngFor="#theme of themes">
        <a [routerLink]="['./Theme',{ themeId: theme.themeId }]">{{theme.name}}</a>
    </li>
  </ul>
</div>
<router-outlet></router-outlet>
    `,
    directives:[RouterOutlet,RouteParams],
    providers:[ThemeService]
})

@RouteConfig([
    {path: '/', name:'Empty', component:EmptyComponent,useAsDefault: true},
    {path: '/:themeId', name:'Theme', component:ThemeComponent}
])

export class ThemeListComponent {
    public themes:Theme[];
    constructor(private themeService:ThemeService,private routeParams:RouteParams) {
        let id = +this.routeParams.get('id');
        this.themeService.getThemes(id).subscribe((themes:Theme[])=>{
            this.themes = themes;
        });
    }
}

I get the errors whenever i just implement the routerParams in my constructor in the child.

Looks like a dup of http://stackoverflow.com/questions/34500147/angular-2-getting-routeparams-from-parent-component/35776884#35776884 — Günter Zöchbauer, Mar 07 '16 at 18:19

score 4 · Accepted Answer · answered Mar 08 '16 at 11:50

I had a similar issue. I solved it by simply importing the RouteParams and Router in the same line as the RouteConfig, ROUTER_DIRECTIVES, RouterOutlet.

This will probably give you an error. So I changed

import {RouteConfig,ROUTER_DIRECTIVES, RouterOutlet} from 'angular2/router';
import {Router,RouteParams} from "angular2/router";

to

import {RouteConfig,ROUTER_DIRECTIVES, RouterOutlet, Router,RouteParams} from 'angular2/router';

Somehow I don't understand why this wouldn't work with two separate imports, but this should solve the issue.

That's a known issue. Using different quotes `'` and `"` for imports doesn't work, but it's a good idea. — Günter Zöchbauer, Mar 08 '16 at 11:52

score 0 · Answer 2 · edited May 23 '17 at 10:31

0

There is currently no easy way. See also https://github.com/angular/angular/issues/6985

Angular 2: getting RouteParams from parent component provides some workarounds.

edited May 23 '17 at 10:31

Community

1
1

answered Mar 07 '16 at 18:22

Günter Zöchbauer

623,577
216
2,003
1,567

I tried to do it with the injector solution but it gives the same error once i use the `get.(RouteParams)`. – Kupi Mar 08 '16 at 09:17
Please check the issues listed at http://stackoverflow.com/questions/34347255/angular-2-router-error-route-config-should-contain-exactly-one-component-lo – Günter Zöchbauer Mar 08 '16 at 09:21
Sorry, out of ideas. Could you create a Plunker. That would make it easier to debug. – Günter Zöchbauer Mar 08 '16 at 09:55
1

I don't think its possibly to use `RouteParams` in the same component where you have declared a `@RouteConfig`. I think i'll use another, ugly solution where i keep the parameter i need in a service and then ask it whenever i need it – Kupi Mar 08 '16 at 10:22
1

Currently there are only ugly workarounds. You have decide for yourself which one is the least ugly :-/ – Günter Zöchbauer Mar 08 '16 at 10:26

Getting routerParams send from parent with child

2 Answers2