多组件订阅Observable的最优方案及组件传值疑问

首先明确：直接传递原始的Observable给组件，让每个子组件各自订阅的方式不是最优——因为RxJS的HTTP Observable是「冷Observable」，每次调用subscribe()都会重新发起一次HTTP请求，这会导致重复请求同一个接口，完全没必要。

下面是几种更合理的方案，按场景推荐：

1. 用shareReplay共享请求结果（最适合单次请求多组件消费的场景） #

在父组件或服务层，把返回的Observable转成「热Observable」，让所有订阅者共享同一次请求的结果：

父组件修改示例 #

// 组件类里
import { shareReplay } from 'rxjs/operators';

clickHandler () {
  // 用shareReplay(1)缓存最近1次结果，所有订阅者共享
  this.observable = this.service.fetch().pipe(shareReplay(1));
}

之后不管SomeOtherComponent内部多少子组件订阅这个observable，都只会发起一次HTTP请求，并且所有组件都能拿到相同的结果。子组件里正常订阅即可，不用额外处理重复请求的问题。

2. 服务层维护状态（适合跨组件共享/数据需要更新的场景） #

如果这个接口数据需要在多个无关组件间共享，或者后续可能有刷新操作，建议在服务里用BehaviorSubject维护状态：

服务修改示例 #

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

@Injectable()
export class YourService {
  // 用BehaviorSubject存储数据，初始值可以设为null或空值
  private dataSubject = new BehaviorSubject<any>(null);
  // 暴露给组件的可观察对象，外部只能订阅不能修改
  public data$ = this.dataSubject.asObservable();

  constructor(private client: ClientService) {}

  fetch () {
    // 发起请求后，把结果发送给Subject
    this.client.get(this.params).subscribe(res => {
      this.dataSubject.next(res);
    });
  }
}

父组件调用 #

clickHandler () {
  this.service.fetch();
}

组件（包括子组件）订阅 #

// 在SomeOtherComponent或其子组件的ngOnInit里
ngOnInit() {
  this.service.data$.subscribe(data => {
    if (data) {
      // 处理数据
    }
  });
}

这种方式的好处是：所有组件共享同一数据源，不管什么时候调用fetch()，所有订阅的组件都会自动收到最新数据，也不会重复请求。

3. 父组件订阅后传递数据（适合组件层级较浅的场景） #

如果SomeOtherComponent的子组件层级不多，也可以由父组件统一订阅，拿到数据后通过@Input传递给子组件：

父组件修改 #

// 组件类里
data: any;

clickHandler () {
  this.service.fetch().subscribe(res => {
    this.data = res;
  });
}

模板传递 #

<some-other-component [data]="data"></some-other-component>

SomeOtherComponent及其子组件接收 #

// SomeOtherComponent里
@Input() data: any;

// 子组件同理，通过@Input从SomeOtherComponent接收数据

这种方式不需要子组件处理Observable，适合对RxJS不熟悉的场景，但如果组件层级很深，会出现「属性透传」的麻烦，这时候就不如前两种方案高效。

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