Angular 2：親コンポーネントからRouteParamsを取得する

質問

親コンポーネントからRouteParamsを取得する方法は？

App.ts :

@Component({
  ...
})

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

export class HomeComponent {
  ...
}

そして、その中の ParentComponent で、ユーザー名のパラメータを取得し、子ルートを設定することが簡単にできます。

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

  ...
}

しかし、それでは、これらの子コンポーネントで同じ 'username' パラメータを取得するにはどうしたらよいでしょうか？上記と同じトリックをやってもダメです。なぜなら、これらのパラメータはProfileComponentか何かで定義されているからですか？

@Component({
  ...
})

export class ChildOneComponent {

  public username: string;

  constructor(
    public params: RouteParams
  ) {
    this.username = params.get('username');
    // returns null
  }

  ...
}

どのように解決するのですか？

UPDATEしてください。

Angular2 finalが正式リリースされたので、正しいやり方は以下の通りです。

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です。

これは、私が "@angular/router": "3.0.0-alpha.6" パッケージを使用してそれを行う方法を示しています。

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

この例では、ルートは次のような形式になっています。/親/:id/子/:childid

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