angular - 使用参数和 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 的方法。

应用程序组件.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 的获取请求。同样，我们将不胜感激。

Answer 1

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

更新:

params 将用于在以下路由配置中检索路由参数，例如 id( 中的 :id'英雄/:id'):

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

{ 路径:'hero/:id'，组件: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 :

queryParamMap
An Observable that contains a map of the query parameters available to all routes. The map supports retrieving single and multiple values from the query parameter.

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。您正在定义一个代表 Observable 的变量 sub这是构造函数范围的本地。它不能在 ngOnInit() 中访问。如果 this.sub 试图在构造函数中引用 sub，则该订阅不会直接提供像 cardUuid 这样的路由参数。 this.sub 会返回 undefined，this.sub.cardUuid 也会返回 undefined。此外，您不能指望 ngOnInit 在 after subscribe() 执行后执行，因此来自 params 的已解析 cardUuid 可能根本不可用.

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

希望对您有所帮助!