使用声明式 RxJS，有没有办法将 Observable 数据从父组件传递到子组件？

Question

我正在使用声明式 RxJS return 来自我的后端服务的响应对象。我能够在我的 bay-page.ts 文件中获取数据并将其显示在我的 html 中。但是，我希望数据显示在我的 results-page.ts 文件中。我使用 Subjects 获取用户输入并将它们传递到我的 bay-page.ts 文件中的方法中，然后将触发 HTTP 请求。

但是，我如何获取这些结果并将它们显示在我的 results-page.html 文件中？

bay-service.ts 文件:

private bayStartSelectedSubject = new Subject<number>();
  bayStartSelectedAction$ = this.bayStartSelectedSubject.asObservable();

  private bayEndSelectedSubject = new Subject<number>();
  bayEndSelectedAction$ = this.bayEndSelectedSubject.asObservable();


  selectedBayChanged(selectedBayStartNumber: number, selectedBayEndNumber?: number): void {
    this.bayStartSelectedSubject.next(selectedBayStartNumber);
    this.bayEndSelectedSubject.next(selectedBayEndNumber);
  }

  grabHuResponsePOST$ = combineLatest([
    this.bayStartSelectedAction$,
    this.bayEndSelectedAction$
  ])
    .pipe(
      switchMap(([bayStart, bayEnd]) => {
        if (bayEnd == null || bayEnd <= 0) {
          bayEnd = bayStart;
        }
        let huRequest: HuRequest = {
          "centerId": "COS",
          "beginBayId": bayStart,
          "endBayId": bayEnd
        }
        const headers = new HttpHeaders({
          'Content-Type': 'application/json'
        });
        let options = {
          headers: headers
        }
        // this.invalidBay.next(true);
        return this.httpClient.post<HuResponse>(this.HandlingUnitResponseUrl, huRequest, options);
      }),
      tap(showDataPlease => console.log('Bays: ', JSON.stringify(showDataPlease))),
    );

bay-page.ts 文件:

ngOnInit() {
    this.bayForm = new FormGroup({
      'bayStart': new FormControl(null, [Validators.required]),
      'bayEnd': new FormControl(null, [Validators.required])
    });
    this.bayService.invalidBay$.subscribe(
      value => {
        console.log(value);
        this.invalidBay = value;
      }
    );
    this.bayService.grabHuResponsePOST$.subscribe(p => {

    });
  }

  onSubmit() {
    this.bayService.selectedBayChanged(this.bayForm.get('bayStart').value, this.bayForm.get('bayEnd').value);
    this.navCtrl.navigateForward([`/results/`]);
  }

results-page.ts 文件:

bayOrBays$ = this.bayService.grabHuResponsePOST$
    .pipe(
      map(response => response.bays),
      catchError(err => {
        this.errorMessageSubject.next(err);
        return EMPTY;
      }),
      tap(showDataPlease => console.log('Bays: ', JSON.stringify(showDataPlease)))
    );

results-page.html 文件:

<ion-card *ngFor="let bay of bayOrBays$ | async; index as i"
                    class="ion-no-margin">
            <ion-card-header>
              <ion-card-title>Bay {{ bay.bayCode }}</ion-card-title>
              <ion-card-subtitle>{{ bay.shipments.length }} Shipments</ion-card-subtitle>
            </ion-card-header>
          </ion-card>

我显然缺少订阅的东西，因为这在我的 results-page.ts 文件中不起作用，但如果我将它放入我的 bay-page.ts 文件中，它确实有效。

Answer 1

一般来说，迟到的订阅者不会收到之前发出的值。您可以使用 shareReplay 运算符在订阅时向新订阅者发出先前的值：

grabHuResponsePOST$ = combineLatest([
    this.bayStartSelectedAction$,
    this.bayEndSelectedAction$
  ])
    .pipe(
      switchMap(([bayStart, bayEnd]) => {
        if (bayEnd == null || bayEnd <= 0) {
          bayEnd = bayStart;
        }
        let huRequest: HuRequest = {
          "centerId": "COS",
          "beginBayId": bayStart,
          "endBayId": bayEnd
        }
        const headers = new HttpHeaders({
          'Content-Type': 'application/json'
        });
        let options = {
          headers: headers
        }
        // this.invalidBay.next(true);
        return this.httpClient.post<HuResponse>(this.HandlingUnitResponseUrl, huRequest, options);
      }),
      tap(showDataPlease => console.log('Bays: ', JSON.stringify(showDataPlease))),
      shareReplay(1) // <-----
    );

使用声明式 RxJS，有没有办法将 Observable 数据从父组件传递到子组件？

Using declarative RxJS, is there a way to pass Observable data to child component from parent component?

rxjs

angular

rxjs-pipeable-operators

rxjs6

rxjs-observables