Angular 5兄弟组件通信：跳转页面后如何保留并传递数据

我之前也碰到过类似的场景——组件跳转后需要传递数据，那些依赖父子/兄弟组件同时存在的通信方式确实完全不适用。下面给你几个实用的方案，你可以根据数据规模和业务需求来选：

方案1：使用Router的Query Params（适合小型字符串数组） #

如果你的缺勤学生只是简单的姓名数组，用路由查询参数是最直接的方式，不需要额外依赖。

提交组件（考勤表单组件）代码： #

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

constructor(private router: Router) {}

onSubmitAttendance() {
  // 假设你已经筛选出缺勤学生数组
  const absentStudents = ['name1', 'name2', 'name3'];
  
  // 跳转并传递查询参数（转成JSON字符串避免数组格式问题）
  this.router.navigate(['/absent-students'], {
    queryParams: { students: JSON.stringify(absentStudents) }
  });
}

接收组件（缺勤学生展示组件）代码： #

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    if (params['students']) {
      const absentStudents = JSON.parse(params['students']);
      // 这里就可以拿到缺勤学生数组，用来渲染页面了
      console.log(absentStudents);
    }
  });
}

注意：如果数组内容过多，query params可能会因为URL长度限制出问题，这种情况就不适合用这个方案。

方案2：使用共享Service配合BehaviorSubject（适合复杂/大型数据） #

如果你的学生数据不止姓名，还有其他信息，或者需要在多个组件间共享这个数据，用共享服务是更稳妥的方式。

第一步：创建共享服务 #

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AttendanceService {
  private absentStudentsSubject = new BehaviorSubject<string[]>([]);
  public absentStudents$ = this.absentStudentsSubject.asObservable();

  setAbsentStudents(students: string[]) {
    this.absentStudentsSubject.next(students);
  }
}

提交组件代码： #

import { Router } from '@angular/router';
import { AttendanceService } from './attendance.service';

constructor(
  private router: Router,
  private attendanceService: AttendanceService
) {}

onSubmitAttendance() {
  const absentStudents = ['name1', 'name2', 'name3'];
  // 先把数据存入服务
  this.attendanceService.setAbsentStudents(absentStudents);
  // 再跳转组件
  this.router.navigate(['/absent-students']);
}

接收组件代码： #

import { AttendanceService } from './attendance.service';

constructor(private attendanceService: AttendanceService) {}

ngOnInit() {
  this.attendanceService.absentStudents$.subscribe(students => {
    if (students.length > 0) {
      // 获取到缺勤学生数据
      console.log(students);
    }
  });
}

这个方案的好处是不受URL长度限制，而且数据是响应式的，后续其他组件需要这个数据也能直接订阅。

方案3：使用localStorage/sessionStorage（适合需要持久化的场景） #

如果希望用户刷新页面后，缺勤学生的数据还能保留，可以用浏览器存储来传递数据。

提交组件代码： #

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

constructor(private router: Router) {}

onSubmitAttendance() {
  const absentStudents = ['name1', 'name2', 'name3'];
  // 存入localStorage，转成JSON字符串
  localStorage.setItem('absentStudents', JSON.stringify(absentStudents));
  this.router.navigate(['/absent-students']);
}

接收组件代码： #

ngOnInit() {
  const storedStudents = localStorage.getItem('absentStudents');
  if (storedStudents) {
    const absentStudents = JSON.parse(storedStudents);
    console.log(absentStudents);
    // 用完后记得删除，避免下次进入组件时拿到旧数据
    localStorage.removeItem('absentStudents');
  }
}

注意：localStorage是持久化存储，除非手动删除否则会一直存在；如果不需要持久化，用sessionStorage更合适，页面关闭后会自动清除。

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