Angular 5：如何通过routerLink传递复杂JSON并在路由组件获取

嘿，我来帮你解决这个Angular 5的问题！要在secondPage/:id/item-list组件里拿到原来的item JSON对象，有两种实用的方案，我给你一步步讲清楚：

这种方法是最稳妥的，尤其是当你的item对象结构比较复杂的时候，不会有序列化的问题。

1. 创建一个共享数据服务
   先新建一个服务来存储和传递选中的item，用BehaviorSubject来确保组件能拿到最新值：

   import { Injectable } from '@angular/core';
   import { BehaviorSubject } from 'rxjs/BehaviorSubject';
   // 这里导入你的item类型定义，如果没有可以省略
   import { Item } from './models/item.model';
   
   @Injectable()
   export class ItemSharedService {
     // 初始化一个空的BehaviorSubject
     private selectedItem$ = new BehaviorSubject<Item>(null);
     // 对外暴露可观察对象，避免外部直接修改源数据
     currentSelectedItem = this.selectedItem$.asObservable();
   
     // 设置选中的item
     setSelectedItem(item: Item) {
       this.selectedItem$.next(item);
     }
   }
   

   记得在你的根模块（比如AppModule）的providers数组里注册这个服务，确保整个应用是单例的。

2. 修改原组件的导航逻辑
   原来的routerLink直接绑定没法先存数据，所以改成点击事件，先把item存入服务再导航：

   <div class="row margin-v-20">
     <my-tile (click)="goToItemList(item)" *ngFor="let item of listaOfItem" [item]="item"></my-tile>
   </div>
   

   然后在组件类里注入服务和路由，实现导航方法：

   import { Router } from '@angular/router';
   import { ItemSharedService } from './services/item-shared.service';
   import { Item } from './models/item.model';
   
   // ... 组件类定义
   constructor(
     private router: Router,
     private itemSharedService: ItemSharedService
   ) {}
   
   goToItemList(item: Item) {
     // 先把选中的item存入服务
     this.itemSharedService.setSelectedItem(item);
     // 再跳转到目标路由
     this.router.navigate(['/secondPage', item.id, 'item-list']);
   }
   

3. 在目标组件中获取item
   在secondPage/:id/item-list对应的组件里，订阅服务的可观察对象就能拿到item：

   import { Component, OnInit } from '@angular/core';
   import { ItemSharedService } from './services/item-shared.service';
   import { Item } from './models/item.model';
   
   @Component({
     selector: 'app-second-page-item-list',
     templateUrl: './second-page-item-list.component.html'
   })
   export class SecondPageItemListComponent implements OnInit {
     currentItem: Item;
   
     constructor(private itemSharedService: ItemSharedService) {}
   
     ngOnInit() {
       this.itemSharedService.currentSelectedItem.subscribe(item => {
         if (item) {
           this.currentItem = item;
           // 这里就可以使用currentItem做你需要的操作了
         }
       });
     }
   }
   

如果你的item是简单的JSON对象（没有循环引用、函数等），可以把它序列化成字符串通过查询参数传递：

1. 修改原组件的导航方法

   goToItemList(item: Item) {
     this.router.navigate(['/secondPage', item.id, 'item-list'], {
       // 把item序列化成JSON字符串作为查询参数
       queryParams: { itemData: JSON.stringify(item) }
     });
   }
   

2. 在目标组件中解析参数
   通过ActivatedRoute获取查询参数并解析成对象：

   import { Component, OnInit } from '@angular/core';
   import { ActivatedRoute } from '@angular/router';
   import { Item } from './models/item.model';
   
   @Component({
     selector: 'app-second-page-item-list',
     templateUrl: './second-page-item-list.component.html'
   })
   export class SecondPageItemListComponent implements OnInit {
     currentItem: Item;
   
     constructor(private route: ActivatedRoute) {}
   
     ngOnInit() {
       this.route.queryParams.subscribe(params => {
         if (params['itemData']) {
           // 把JSON字符串解析回对象
           this.currentItem = JSON.parse(params['itemData']);
         }
       });
     }
   }
   

注意：如果item对象包含循环引用或者不可序列化的内容（比如函数、Date对象可能需要额外处理），这种方法会出问题，这时候方案1更合适。

内容的提问来源于stack exchange，提问作者Stack Diego