Angular11中如何将选中的数组数据从一个模块传递到另一个模块

方案1：共享服务（最推荐，适配绝大多数场景） #

• 原理：Angular默认以单例模式管理服务，只要在两个模块共同的父注入器（通常是根注入器）中注册服务，就可以在两个模块的组件间共享数据，不会受模块隔离影响。
• 实现步骤：
  1. 首先生成共享服务，执行命令 ng generate service services/transaction-share
  2. 在服务中定义数据读写方法：

import { Injectable } from '@angular/core';
import { Transaction } from '../models/transaction.model'; // 替换为你自己定义的交易数据接口

@Injectable({
  providedIn: 'root' // 声明在根注入器，全应用单例
})
export class TransactionShareService {
  private selectedTransactions: Transaction[] = [];

  // 存储选中数据，做浅拷贝避免源数据被意外修改
  setSelected(data: Transaction[]): void {
    this.selectedTransactions = [...data];
  }

  // 读取选中数据
  getSelected(): Transaction[] {
    return [...this.selectedTransactions];
  }

  // 清空缓存，避免下次进入页面残留旧数据
  clear(): void {
    this.selectedTransactions = [];
  }
}

3. 交易列表页跳转前先存数据：

import { Router } from '@angular/router';
import { TransactionShareService } from '../services/transaction-share.service';

constructor(
  private router: Router,
  private transactionShareService: TransactionShareService
) {}

// 跳转按钮触发的方法
goToCostManage(): void {
  // this.selectedGridData 就是你从grid组件中拿到的用户选中行数据
  this.transactionShareService.setSelected(this.selectedGridData);
  this.router.navigate(['/cost-manage']); // 替换为你的成本管理页路由
}

4. 成本管理页初始化时读取数据：

import { TransactionShareService } from '../services/transaction-share.service';

selectedTransactions: Transaction[] = [];

constructor(private transactionShareService: TransactionShareService) {}

ngOnInit(): void {
  this.selectedTransactions = this.transactionShareService.getSelected();
  // 拿到数据后即可做汇总计算等后续业务逻辑
}

ngOnDestroy(): void {
  // 页面销毁时清空缓存，避免污染下一次使用
  this.transactionShareService.clear();
}

• 适配场景：数据量较大、数据结构复杂，不需要在URL中暴露参数的所有场景。

方案2：路由query参数传递（适合小数据量场景） #

• 原理：跳转路由时把数据序列化后放在URL的query参数中，目标页面直接从路由参数读取。
• 注意：仅支持可序列化的简单数据结构，数据量过大会超出浏览器URL长度限制，且数据会直接暴露在URL中。
• 实现步骤：
  1. 交易列表页跳转时传参：

goToCostManage(): void {
  const queryParams = {
    selected: JSON.stringify(this.selectedGridData)
  };
  this.router.navigate(['/cost-manage'], { queryParams });
}

2. 成本管理页读取参数：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
  const selectedStr = this.route.snapshot.queryParamMap.get('selected');
  if (selectedStr) {
    this.selectedTransactions = JSON.parse(selectedStr);
  }
}

• 适配场景：选中数据条数少、结构简单，允许参数暴露在URL中的轻量场景。

方案3：浏览器本地存储（适合需要持久化的场景） #

• 原理：把数据存在sessionStorage或localStorage中，目标页面读取即可，sessionStorage会在页面关闭后自动清空，localStorage会永久存储除非手动删除。
• 实现代码：

// 交易列表页存储数据
goToCostManage(): void {
  sessionStorage.setItem('selectedTransactions', JSON.stringify(this.selectedGridData));
  this.router.navigate(['/cost-manage']);
}

// 成本管理页读取数据
ngOnInit(): void {
  const selectedStr = sessionStorage.getItem('selectedTransactions');
  if (selectedStr) {
    this.selectedTransactions = JSON.parse(selectedStr);
    // 用完即可删除避免残留
    sessionStorage.removeItem('selectedTransactions');
  }
}

• 适配场景：刷新页面后仍需要保留选中数据的场景，缺点是仅支持存储可序列化内容，无法存储函数、Symbol等特殊类型数据。

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