将 Observable 作为 Subject 传递和展开答案

【问题标题】：Passing and unwrapping Observable as Subject将 Observable 作为 Subject 传递和展开
【发布时间】：2019-11-20 14:28:24
【问题描述】：

我需要将数据从一个组件传递到另一个组件，但我很难做到。

我有一个Observable，我需要将其传递为Subject，这是另一个Observable。我怎么做？我目前的方式在 目标组件 undefined 中无法正常工作。

这就是我所拥有的：

card.component.ts （一切从这里开始）

showBox(studentID) {
    const airportPickup = this.studentService.getCurrentStudents().pipe(
        map(snaps => {
            const student = snaps.find( s => s.studentID === studentID );
            return {
                requirePickup: student.pickup,
                whopickup: student.whoPickup
            };
        })
    );
    this.studentService.airportPickupDropoff.next(airportPickup);
}

如果我 console.log() airportPickup 我得到对象。没有问题。问题是当我在另一个组件中得到它时，我得到的是undefined。

flight-info.component.ts （目标）

getAirportPickup() {
    this.studentService.airportPickupDropoff.subscribe(
        (apdata) => {
            this.airportPickupDropoff = apdata;
        },
        (e) => alert(e)
    );
}

服务我有这个：

airportPickupDropoff = new Subject<any>();

【问题讨论】：

标签： angular rxjs angular2-observables rxjs-observables

【解决方案1】：

您需要订阅 observable，或将其与 RxJS 运算符（例如 tap）链接，以便将 observable 中的值分配给您的 airportPickupDropoff Subject。

选项1：

showBox(studentID) {
  this.studentService.getCurrentStudents().pipe(
    map(snaps => {
      const student = snaps.find( s => s.studentID === studentID );
      return {
        requirePickup: student.pickup,
        whopickup: student.whoPickup
      };
    }),
  ).subscribe(response => {
    this.studentService.airportPickupDropoff.next(response);
  });
}

选项 2：

showBox(studentID) {
  this.studentService.getCurrentStudents().pipe(
    map(snaps => {
      const student = snaps.find( s => s.studentID === studentID );
      return {
        requirePickup: student.pickup,
        whopickup: student.whoPickup
      };
    }),
    tap(response => this.studentService.airportPickupDropoff.next(response)),
  ).subscribe();
}

【讨论】：

【解决方案2】：

也许通过Subject而不是另一个Observable发送数据会更好？

showBox(studentID) {
  ///...
  airportPickup.subscribe(apdata => this.studentService.airportPickupDropoff.next(apdata));
}

【讨论】：