使用参数和 ActivatedRoute Angular 2 获取 url id答案

【问题标题】：Getting url id with params and ActivatedRoute Angular 2使用参数和 ActivatedRoute Angular 2 获取 url id
【发布时间】：2017-12-14 17:47:15
【问题描述】：

我正在尝试从 URL 中获取 uuid（看起来像 https://something.com/card?id=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);
    });
}

应用服务.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 正确加载应用程序。在控制台网络中显示 card?uuid=0 的获取请求。再次感谢任何帮助。

【问题讨论】：

网址格式http://address/cards?uuid= 使用的是queryParams，而不是params。您需要使用this.route.queryParamMap 而不是this.route.paramMap。 paramMap 根据 url 的设置方式，其中不会包含任何值。
这成功了！我相信您现在已经知道，我对 queryParam 与 param 的理解至少可以说是缺乏的。对此表示歉意。但这现在是从 URL 中提取 id。谢谢！
请将解决方案作为答案发布，而不是作为问题的更新。这是为了避免混淆。谢谢。
这个answer 很好地描述了params 与queryParams 在一般RESTful API 应用程序的上下文中。我的原始答案引用了 queryParams。很高兴听到它成功了！请标记帮助您实现解决方案的答案。

标签： angular

【解决方案1】：

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

更新：

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

queryParams 将用于从诸如https://something.com/card?id= 之类的 url 模式中检索查询参数。标识符为id，即? 之后和= 之前的部分。

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

您可以使用this.route.queryParams.subscribe() 以类似于this.route.params.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 的 observable 访问查询参数：

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

更新：

可能导致问题的一个潜在问题是ngOnInit() 中的this.sub.cardUuid。您正在定义一个变量sub，代表构造函数范围内的本地Observable。在ngOnInit() 中将无法访问它。如果this.sub 试图在构造函数中引用sub，则该订阅将没有像cardUuid 这样的路由参数直接可用。 this.sub 会返回未定义，this.sub.cardUuid 也会反过来返回未定义。此外，您不能指望 ngOnInit 在 subscribe() 已执行后执行，因此 params 中已解析的 cardUuid 可能根本不可用。

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

希望对您有所帮助！

【讨论】：

这确实有帮助。你让我朝着正确的方向前进。我仍然得到一个未定义的，它首先运行该函数，然后第二次返回该值。进步！
你能澄清一下“第二次”吗？您能否澄清一下this.sub 指的是什么？请参阅我的更新答案。
抱歉耽搁了。在页面加载时查看控制台时，console.log(this.cardUuid) 返回 undefined 并在片刻后返回正确的 Uuid。我假设因为它位于 ngOnInit() 中，所以它运行了两次？
ngOnInit() 和 contructor() 仅在组件实例化时运行一次，在这种情况下，当从示例应用程序的主视图中选择英雄时。 ngOnInit() 和 contructor() 在这里有效地做同样的事情，只是以不同的方式检索值。
谢谢我需要this.route.paramMap。您的 Plunker 示例非常适合我。

【解决方案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 发送到我的服务以发出获取请求。再次，cred 向@AlexanderStaroselsky 寻求解决方案。

【讨论】：