Question

我正在尝试从网址（看起来像{{3}} ，其中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的建议之后，我重新构建了我从url per angular.io docs调用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)
}

但是我仍然没有使用从Url获取的Uuid正确加载应用程序。在控制台网络中显示卡的获取请求？uuid = 0。再次，任何帮助将不胜感激。

Answer 1

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

<强>更新

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

queryParams将用于从您的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+）的版本，您需要通过名为ActivatedRoute的queryParamMap上的观察点访问查询参数：

<强> 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试图引用构造函数中的sub，那么该订阅将不会有像cardUuid直接可用的路径参数。 this.sub将返回undefined，this.sub.cardUuid也将返回undefined。此外，您无法依靠 subscribe()执行后执行的ngOnInit，因此来自params的已解决的cardUuid可能根本无法使用。

这是官方Angular路由器实例的plunker。如果您查看文件 app / hero-detail.component.ts 并在单击英雄详细信息组件/视图时查看注释和控制台语句，您将尝试未定义的错误记录this.sub和this.sub.uuid。

希望这有帮助！

Answer 2

在@AlexanderStaroselsky和@Angular docs的帮助下，找到了一个解决方案。

我在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发送到我的服务中以发出get请求。同样，还有@AlexanderStaroselsky的解决方案。

使用params和ActivatedRoute Angular 2获取url id

2 个答案: