Angular2:获取父路由器数据

时间:2016-02-09 18:15:04

标签: angular angular2-routing

我在路线/ blabla /下创建一个组件:id / blabla /:secondid

我的网址的第一部分" / blabla /:id /..."由我的第一个路由组件管理。

然后,第二个路由器管理网址的第二部分。

在我的组件中,我可以轻松访问我的":secondid"在RouteData。

但我想知道如何访问我的":id"从那里。

有什么想法吗?

2 个答案:

答案 0 :(得分:3)

传递第一个id以及数据绑定。

答案 1 :(得分:2)

您必须使用Injector来获取父母数据。

这是使用此功能从here提取的示例代码。

    this.params = injector.parent.parent.get(RouteParams);
    this.userLogin = this.params.get('userLogin');

看看构造函数以及如何使用injector来获得优秀的父母userLogin

import {Component, Injector} from 'angular2/core';
import {Http} from 'angular2/http';
import {ROUTER_DIRECTIVES, Router, RouteParams, RouteConfig} from 'angular2/router';

@Component({
  directives: [ROUTER_DIRECTIVES],
  template: `
    <div class="col-sm-3">
      <img class="img-circle" src="" />
      <p *ngIf="userData.name">
        <i class="glyphicon glyphicon-user"></i> 

      </p>
      <p *ngIf="userData.company">
        <i class="glyphicon glyphicon-briefcase"></i> 

      </p>
      <p *ngIf="userData.location">
        <i class="glyphicon glyphicon-globe"></i> 

      </p>
    </div>
    <div class="col-sm-9">

    </div>
  `,
  styles: [`
    img { width: 100px; margin-bottom: 10px; }
  `]
})

export class UserDetail {
  params: RouteParams;
  userLogin: string;
  userData: Object = {};

  constructor(public http: Http, params: RouteParams, injector: Injector, private _router: Router) {
    // We use injector to get a hold of the parent's params
    this.params = injector.parent.parent.get(RouteParams);
    this.userLogin = this.params.get('userLogin');
  }

  ngOnInit() {
    this.http.get(`http://api.github.com/users/${this.userLogin}`)
      .map(response => response.json())
      .subscribe(
        data => this.userData = data,
        err => console.log(err)
      );
  }

}