如何訂閱來自paramMap的兩個不同的observable？

當我使用路由引數請求資料paramMap時，當它是一個引數時，我能夠讓一切正常作業。例如，foo.getThing(id)。

不過，我正在努力如何“觀察”多個論點。我需要 myorganizationId 和mylocationId來查找位置。

我已經閱讀了幾個教程，也許 ForkJoin 可能是我需要的，但到目前為止我所看到的只是從不帶引數的東西中獲取初始請求。例如，foo.getStuff()不foo.getThing(id)

// settings.component.ts

private organizationId!: string;
private locationId!: string;

private organizationId$ = this.activatedRoute.paramMap.pipe(
    tap((params) => {
        this.organizationId = params.get('organizationId')!;
    })
);

private locationId$ = this.activatedRoute.paramMap.pipe(
    tap((params) => {
        this.locationId = params.get('locationId')!;
    })
);

public location$: Observable<ILocation> = this.locationId$.pipe(
    switchMap(() =>
        this.locationService.getLocation(this.organizationId, this.locationId)
    )
);

當我獲得有關我的組織的詳細資訊時，我可以訂閱organizationId. 如果情況發生變化，則回應會相應更新。

我正在嘗試為我的位置完成相同的任務。如果organizationId or locationId發生變化，我希望管道重新運行并獲取正確的資料。

如何訂閱兩個不同的 observable？

uj5u.com熱心網友回復：

我的好！！“讓它變得簡單，讓它變得簡單”（*）

//if we want to store the params in this.organizationID and this.locationId 
location$=this.activatedRoute.paramMap.pipe(
          switchMap(params=>{
             this.organizationId = params.get('organizationId')!
             this.locationId = params.get('locationId')!
             return this.locationService.getLocation(this.organizationId, this.locationId)
          }))

或者

//if we needn't store the params
location$=this.activatedRoute.paramMap.pipe(
          switchMap(params=>{
             const organizationId = params.get('organizationId')!
             const locationId = params.get('locationId')!
             return this.locationService.getLocation(organizationId, locationId)
          }))

(*) 為什么所有其他答案都如此復雜？

uj5u.com熱心網友回復：

問題不是“我如何訂閱兩個不同的 observables？ ”，而是“如何從多個源創建一個 observable，只要任何源發出就會發出”。

ginalx 是對的，combineLatest它將幫助您：

  private organizationId$ = this.activatedRoute.paramMap.pipe(
    map(params => params.get('organizationId')),
    distinctUntilChanged()
  );

  private locationId$ = this.activatedRoute.paramMap.pipe(
    map(params => params.get('locationId')),
    distinctUntilChanged()
  );

  public location$ = combineLatest([this.organizationId$, this.locationId$]).pipe(
    switchMap(([orgId, locId]) => this.locationService.getLocation(orgId, locId))
  );

但是，如果您的唯一來源都來自路由引數，那么使用它可能更簡單params，paramMap因為您可以訪問完整的引數物件（而不僅僅是單個值）：

  public location$ = this.activatedRoute.params.pipe(
    switchMap(params => this.locationService.getLocation(params.organizationId, params.locationId))
  );

uj5u.com熱心網友回復：

您正在尋找的可能是combineLatest. 添加distinctUntilChanged是因為它應該適合您的情況

private organizationId$ = this.activatedRoute.paramMap.pipe(
    map((params) => params.get('organizationId')),
    distinctUntilChanged()
);

private locationId$ = this.activatedRoute.paramMap.pipe(
    map((params) => params.get('locationId')),
    distinctUntilChanged()
);

private whatYouNeed$ = combineLatest(this.organizationId$, this.locationId$)

例如，獲取值的一種方法是

this.whatYouNeed$.subscribe(([organizationId, locationId]) => console.log(organizationId, locationId))

uj5u.com熱心網友回復：

combineLatestWith是一個運算子，將源與提供的 observable 組合起來，以在每次變化時發出每個 observable 的最新值的陣列。因此，您希望將location$定義更改為：

const location$ = locationId$.pipe(
  combineLatestWith(organizationId$),
  switchMap(
    ([locId, orgId]) =>
    this.locationService.getLocation(
      locId,
      orgId
    )
  )
);

標籤：有角度的rxjs

上一篇：切換時從歷史記錄中洗掉組件

下一篇：“ArtistItemsComponent”型別上不存在屬性“藝術家”