Angular 5无API场景下，使用RXJS传递数字与数组的正确方法

嘿，我懂你现在的困惑——布尔值用Subject+服务的方式能顺利传递，但换成数字或数组就卡壳了对吧？其实核心逻辑和布尔值是完全一致的，大概率是你在实现细节上没注意到类型声明或者服务单例的问题，我来给你一步步拆解正确的做法：

1. 先搭建共享数据服务 #

首先要确保你的服务是单例（Angular中默认在根模块提供或者用providedIn: 'root'就能保证单例），这样所有组件共享同一个Subject实例，才能正常传值。

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

@Injectable({
  providedIn: 'root' // 确保服务是单例
})
export class DataSharingService {
  // 数字传递的Subject与可观察对象
  private numberSource = new Subject<number>();
  number$ = this.numberSource.asObservable();

  // 数组传递的Subject与可观察对象（这里用number[]举例，你可以换成任意类型）
  private arraySource = new Subject<number[]>();
  array$ = this.arraySource.asObservable();

  // 发送数字的方法
  sendNumber(num: number): void {
    this.numberSource.next(num);
  }

  // 发送数组的方法
  sendArray(arr: number[]): void {
    this.arraySource.next(arr);
  }
}

2. 在发送组件中触发数据传递 #

在需要发送数字/数组的组件里，注入服务后直接调用对应的发送方法：

import { Component } from '@angular/core';
import { DataSharingService } from './data-sharing.service';

@Component({
  selector: 'app-sender',
  template: `
    <button (click)="sendNum()">发送数字42</button>
    <button (click)="sendArr()">发送数组[1,2,3,4]</button>
  `
})
export class SenderComponent {
  constructor(private dataSharingService: DataSharingService) {}

  sendNum(): void {
    this.dataSharingService.sendNumber(42);
  }

  sendArr(): void {
    this.dataSharingService.sendArray([1,2,3,4]);
  }
}

3. 在接收组件中订阅并处理数据 #

和你处理布尔值的思路一样，不需要存储接收值的话，直接在订阅回调里评估处理即可：

import { Component, OnInit } from '@angular/core';
import { DataSharingService } from './data-sharing.service';

@Component({
  selector: 'app-receiver',
  template: `
    <p>处理后的数字: {{ processedNum }}</p>
    <p>过滤后的数组: {{ filteredArr }}</p>
  `
})
export class ReceiverComponent implements OnInit {
  processedNum: number;
  filteredArr: number[];

  constructor(private dataSharingService: DataSharingService) {}

  ngOnInit(): void {
    // 订阅数字流，直接处理
    this.dataSharingService.number$.subscribe(num => {
      this.processedNum = num * 2; // 这里直接评估生成新值，不用存储原数字
    });

    // 订阅数组流，直接处理
    this.dataSharingService.array$.subscribe(arr => {
      this.filteredArr = arr.filter(item => item > 2); // 直接过滤数组，不用存储原数组
    });
  }
}

几个容易踩的坑 #

• 一定要指定Subject的泛型类型：比如new Subject<number>()而不是new Subject()，这样TypeScript能帮你检查类型匹配，避免隐式转换导致的问题。
• 确保服务是单例：如果你的服务是在组件层级提供的，不同组件会拿到不同的服务实例，自然收不到值。用providedIn: 'root'是最稳妥的方式。
• 如果需要初始值/订阅时能拿到最新值：可以把普通Subject换成BehaviorSubject，比如private numberSource = new BehaviorSubject<number>(0);，这样订阅时会先收到初始值，之后再接收新传递的值。

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