Получение routerParams от родителя с дочерним устройством

Question

У меня есть компонент, который имеет @Routeconfig (родительский).

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; 
     }); 
    } 
} 

Я хочу отправить идентификатор из организации моего ThemeListComponent (ребенка). Это работает, но когда я пытаюсь получить routeParams с моим дочерним компонентом, он дает ошибки.

ИСКЛЮЧЕНИЕ: Ошибка при создании Router! (RouterLink -> Маршрутизатор).

ОРИГИНАЛЬНОЕ ИСКЛЮЧЕНИЕ: Конфигурация маршрута должна содержать только одно свойство «компонент», «загрузчик» или «redirectTo».

Это ThemeListComponent и как я пытаюсь получить 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; 
     }); 
    } 
} 

Я получаю ошибки каждый раз, когда я только выполнению routerParams в моем конструкторе в ребенке.

Answer 1

У меня была аналогичная проблема. Я решил это, просто импортировав RouteParams и Router в ту же строку, что и RouteConfig, ROUTER_DIRECTIVES, RouterOutlet.

Это, вероятно, даст вам ошибку. Поэтому я изменил

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

в

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

Как-то я не понимаю, почему это не будет работать с двумя отдельными импорта, но это должно решить проблему.

Answer 2

В настоящее время нет простого способа. См. Также https://github.com/angular/angular/issues/6985

Angular 2: getting RouteParams from parent component предлагает некоторые обходные пути.