Angular 2+路由至子组件时传递数组数据的问题

我来帮你搞定这个问题～ 你想要在路由跳转时不修改URL，同时把数组传给子组件，之前拿到undefined大概率是因为没找对正确的传递方式，下面给你两种靠谱的方案：

方案一：使用路由导航的state参数（官方推荐，适合临时传递） #

Angular 7.2及以上版本支持在路由导航时传递state参数，这个参数不会出现在URL里，而是存在浏览器的历史状态中。

父组件导航代码 #

在触发路由跳转的地方，通过navigate方法的第二个参数传入state：

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

constructor(private router: Router) {}

goToChildComponent() {
  const yourArray = [1, 2, 3, 'hello']; // 你的目标数组
  this.router.navigate(['/your-child-path'], {
    state: { passedArray: yourArray }
  });
}

子组件获取数据 #

子组件里可以通过两种方式获取这个数组：

1. 从当前导航状态中获取（适合组件刚被导航进来的场景）
2. 从history.state中获取（适合组件刷新后重新加载的场景，因为刷新后路由导航状态会丢失）

代码示例：

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

constructor(private router: Router) {}

ngOnInit() {
  // 方式1：从当前导航状态拿
  const navigation = this.router.getCurrentNavigation();
  if (navigation?.extras?.state) {
    const receivedArray = navigation.extras.state['passedArray'];
    console.log('从导航状态拿到的数组：', receivedArray);
  }

  // 方式2：从history.state拿（应对刷新场景）
  const historyArray = history.state.passedArray;
  if (historyArray) {
    console.log('从history拿到的数组：', historyArray);
  }
}

方案二：使用共享服务传递数据（适合复杂场景/数据持久化） #

如果你的数组需要在多个组件间共享，或者担心刷新后数据丢失，可以用Angular的服务来实现数据共享。

第一步：创建共享服务 #

生成一个全局的共享服务，用BehaviorSubject来保存数组（它能保存当前值，新订阅的组件也能拿到最新数据）：

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

@Injectable({ providedIn: 'root' })
export class ArrayShareService {
  private arraySubject = new BehaviorSubject<any[]>([]);
  public array$: Observable<any[]> = this.arraySubject.asObservable();

  // 设置要传递的数组
  setSharedArray(data: any[]) {
    this.arraySubject.next(data);
  }
}

第二步：父组件设置数据 #

在跳转前先把数组存入服务：

import { Router } from '@angular/router';
import { ArrayShareService } from './array-share.service';

constructor(
  private router: Router,
  private arrayShareService: ArrayShareService
) {}

goToChildComponent() {
  const yourArray = ['apple', 'banana', 'orange'];
  this.arrayShareService.setSharedArray(yourArray);
  this.router.navigate(['/your-child-path']);
}

第三步：子组件获取数据 #

在子组件中订阅服务的array$来拿到数组：

import { ArrayShareService } from './array-share.service';

constructor(private arrayShareService: ArrayShareService) {}

ngOnInit() {
  this.arrayShareService.array$.subscribe(array => {
    // 这里可以根据你的需求判断数组是否有效
    if (array.length > 0) {
      console.log('从服务拿到的数组：', array);
    }
  });
}

为什么你之前会拿到undefined？ #

大概率是这些原因：

• 用了queryParams但没把数组序列化（比如直接传数组会变成[object Object]，解析后就是undefined）
• 尝试用路由参数传递，但数组不适合放在URL里，而且配置复杂
• 获取数据的时机不对，比如在ngOnInit之前就去拿导航状态，或者刷新后没从history.state取数据

内容的提问来源于stack exchange，提问作者Folky.H