使用参数和ActivatedRoute Angular 2获取URL ID

Question

我正在尝试从URL（看起来像https://something.com/card?id= uuid进入的地方）中获取一个uuid，然后使用该uuid来获取http get请求。

现在我有我的app.component.ts看起来像：

private cardUuid: string;

constructor(private service: AppService,
            private route: ActivatedRoute){
            let sub = this.route.params.subscribe((params: Params) => {
                  this.cardUuid = params['id'];
                  console.log(this.cardUuid)
                })

}


ngOnInit(){
  this.service.browserUuid = 'http://address/cards?uuid=' + this.sub.cardUuid;
    console.log(this.sub.cardUuid)

}

我的控制台日志返回为未定义。我想知道为什么会这样吗？获取uuid的方法是否错误或呼叫计时是否错误？

任何帮助/提示/建议将不胜感激。

更新： 根据@Alexander Staroselsky的建议，我重新构造了每个angular.io文档从url调用uuid的方法。

app.component.ts：

card: Card = {};

ngOnInit() {
 this.route.paramMap
  .switchMap((params: ParamMap) =>
    this.service.fetchCardUuid(+params.get('id')))
  .subscribe(
    card => {
      this.card = card;
      this.getVenueUuid(this.card);
    });
}

app-service.ts：

public UuidUrl = 'http://websiteaddress/cards?uuid='

constructor(private http: Http){}


private extractData(res:Response) {
  let body = res.json();
  return body || [];
}

fetchCardUuid(id: number) {
  return this.http.get(this.UuidUrl + id)
    .map(this.extractData)
}

但是，我仍然无法使用从网址获取的Uuid正确加载应用程序。在控制台网络中，显示了card？uuid = 0的获取请求。同样，任何帮助将不胜感激。

Answer 1

您提供的URL的格式是利用查询参数（queryParams），而不是路由参数。

更新：

params将用于检索路由参数，例如id以下路由配置（:idin中'hero/:id'）：

queryParams用于从网址格式（例如your）中检索查询参数https://something.com/card?id=。标识符将是之前和之后的id部分。?=

{ path: 'hero/:id', component: HeroDetailComponent }

您可以this.route.params.subscribe()使用类似于以下方式的方式检索查询参数this.route.queryParams.subscribe()：

constructor(
    private service: AppService, 
    private route: ActivatedRoute) {}

ngOnInit() {
    let sub = 
        this.route.queryParams
          .subscribe((queryParams: Params) => {
            this.cardUuid = queryParams['id'];
            console.log(this.cardUuid);

            this.service.browserUuid = 'http://address/cards?uuid=' + this.cardUuid;
          });


}

更新：

根据所使用的Angular（4+）版本，您需要通过一个称为queryParamMap的ActivatedRoute上的可观察对象来访问查询参数：

queryParamMap
一个Observable，其中包含可用于所有路由的查询参数的映射。该映射支持从查询参数中检索单个和多个值。

this.route.queryParamMap
    .subscribe((queryParams: QueryParamMap)) => {
        this.cardUuidt = queryParams.get('id');
        console.log(this.cardUuidt);

        this.service.browserUuid = 'http://address/cards?uuid=' + this.cardUuid;
});

更新：

这可能会导致问题的一个潜在的问题是this.sub.cardUuid在ngOnInit()。您正在定义一个sub表示Observable的变量，该变量在构造函数的作用域内是局部的。无法在中访问它ngOnInit()。如果this.sub尝试引用subin构造函数，则该订阅将不会直接使用诸如cardUuid之类的路由参数。this.sub将返回不确定的状态，this.sub.cardUuid反过来又返回不确定的状态。另外，您不能指望ngOnInit在执行后就 subscribe()被执行了，因此cardUuid从params 解析的结果可能根本不可用。

这里是一个plunker官方的角度路由器活生生的例子的。如果单击app / hero-detail.component.ts文件并在单击英雄详细信息组件/视图时查看注释和控制台语句，则尝试登录this.sub和时将出现未定义的错误this.sub.uuid。

希望有帮助！

Answer 2

在@AlexanderStaroselsky 和@Angular 文档的帮助下，找到了解决方案。

我在 app.component.ts 中的最终 ngOnInt() 看起来像这样：

ngOnInit() {
  this.route.queryParamMap
    .switchMap((params: Params) =>
      this.service.fetchCardUuid(params.get('id')))
    .subscribe(
      card => {
        this.card = card;
        this.getVenueUuid(this.card);
      });
}

此解决方案有效地从 Url 获取 id 并将该 id 发送到我的服务中以发出获取请求。再次，信誉转到@AlexanderStaroselsky 寻求解决方案。