Angular 正在获取带有参数和ActivateRoute 2的url id

我试图从URL（看起来像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)
}

---

但是，我仍然无法使用从Url获取的Uuid正确加载应用程序。在控制台中，网络显示卡的get请求？uuid=0。再次感谢您的帮助。

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

更新：

params

将用于检索以下路由配置中的路由参数，如

id

（

'hero/:id'

中的

:id

）：

queryParams

将用于从url模式（如

url）检索查询参数https://something.com/card?id=

。标识符将是

id

，在

？

之后和

=

之前的部分

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

您可以使用类似以下内容的

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+）版本，您需要通过一个名为：

查询参数映射
包含查询映射的可观察对象 可用于所有路线的参数。该映射支持检索单个 以及查询参数中的多个值

更新：

可能导致问题的一个潜在问题是

ngOnInit（）

中的

this.sub.cardUuid

。您正在定义一个变量

sub

，该变量表示构造函数作用域的局部变量。在

ngOnInit（）

中无法访问它。如果

this.sub

正试图引用构造函数中的

sub

，则该订阅将不会直接提供像cardUuid这样的路由参数

this.sub

将返回未定义，而

this.sub.cardUuid

也将返回未定义。此外，您不能指望ngOnInit在执行

subscribe（）

之后执行，因此参数中解析的

cardUuid

可能根本不可用

下面是一个官方的角度路由器实例。如果查看文件app/hero detail.component.ts并在单击hero detail组件/视图时查看注释和控制台语句，您将看到试图记录

this.sub

和

this.sub.uuid

时出现的未定义错误

---

希望这有帮助

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

app.component.ts中的最后一个ngOnInt（）如下所示：

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


}

ngOnInit（）{
this.route.queryParamMap
.switchMap（（参数：参数）=>
this.service.fetchCardUuid（params.get（'id'））
.订阅(
卡片=>{
这张卡=卡片；
这个.getVenueUuid（这个.card）；
});
}

---

此解决方案有效地从Url获取id，并将该id发送到my服务以发出get请求。cred再次向@AlexanderStaroselsky寻求解决方案。

这确实有帮助。你把我带到了正确的方向。我仍然得到一个未定义的值，它首先运行函数，然后第二次返回值。进步！你能澄清一下“第二次”吗？你能不能也澄清一下这个.sub所指的是什么？请参阅我的最新答案。对延误表示歉意。当在页面加载时观察控制台时，console.log（this.cardUuid）返回未定义，然后在几分钟后返回正确的Uuid。我假设，因为它位于ngOnInit（）中，所以它会运行两次？

ngOnInit（）

和

constructor（）

仅在实例化组件时运行一次，在这种情况下，当从示例应用程序的主视图中选择一个英雄时

ngOnInit（）

和

constructor（）

在这里有效地做了同样的事情，只是用不同的方式检索了值。谢谢我需要

这个.route.paramMap

。你的Plunker示例对我非常有用。url模式

http://address/cards?uuid=

正在使用

查询参数

，而不是

参数

。您需要使用

this.route.queryParamMap

而不是

this.route.paramMap

<根据url的设置方式，code>paramMap中不会有任何值。这是有效的！我相信你现在已经知道了，我对queryParam和param的理解还很欠缺。对此表示歉意。但现在这是从URL中提取id。非常感谢。请将解决方案发布为答案，而不是问题的更新。这是为了避免混淆。谢谢。在一般RESTful API应用程序的上下文中，这对

params

vs

queryParams

有很好的描述。我最初的答案引用了queryParams。很高兴听到它成功了！请标出有助于您实现解决方案的答案。