在Angular 4中将API响应（对象）从组件解析到另一个组件答案

【问题标题】：Parsing API Response (object) from component to another component in Angular 4在Angular 4中将API响应（对象）从组件解析到另一个组件
【发布时间】：2018-09-05 03:47:40
【问题描述】：

我想解析 API 对另一个组件的响应

这是来自'detail_item.component.ts'的代码，此代码将数据发送到'book_item.component.ts'中的路由“bookitem”

onSubmit(){
    this.appService.addItem(this.item).subscribe(item => {
      if(item.status ==200){
        this.router.navigate(['/bookitem'], {queryParams: {data: item.data}});
      }
    })
}

这是来自“book_item.component.ts”的代码

ngOnInit() {
    this.routeActive.queryParams.filter(params => params.data).subscribe(params => {
       this.book_item = params.data;
    });
}

当我console.log(this.book_item)时，我从中得到的是[object object]。它应该包含 json 数据。

【问题讨论】：

添加stackblitz.com 示例或有关您收到的响应的更多信息
只需查看您拥有的代码 - 看起来您 item.data 是一个对象，而不是原始对象。

标签： angular typescript angular4-forms angular4-httpclient

【解决方案1】：

如果 item.data 的类型是对象，则需要先将其转换为字符串，就像

onSubmit(){
    this.appService.addItem(this.item).subscribe(item => {
      if(item.status ==200){
        this.router.navigate(['/bookitem'], {queryParams: {data: 
JSON.stringify(item.data)}});
      }
    })
}

那么当你从其他组件上的路由读取时就可以解析了

 ngOnInit() {
     this.book_item = JSON.parse(this.route.snapshot.queryParams['data']);
          }

【讨论】：

【解决方案2】：

你得到了[object object]，这完全没问题，因为你试图在查询字符串中传递对象。此外，您不能在查询字符串中传递对象，您可以传递可轻松转换为字符串的值，例如数字。

【讨论】：