同一个容器中的不同 http 请求根据路由响应 [RXJS]

Question

我有一个容器，里面有两个展示组件。

主要成分

<div>
  <app-search></app-search>
  <app-table></app-table>
</div>

app-search 组件有一个简单的表单，您可以在其中选择 year、month 并单击 search

信息上升 @Output()，主容器中有一个 http 请求，信息下降到 app-table 到 @Inputs。

然后，有一个带有大约 10 条不同路线的导航栏。在每条路线上，用户请求查看有关不同地点的信息，但所有结果都适合同一个 <app-table> 组件。

我想做的是获取 url 的最后一个字符串并在不同的 http 请求之间进行选择（在 .service.ts 文件中）。每个 http 请求都有这种形状。

getSomething(cod: number, year: number, month: number) {
  const url = `123.123.123/ta&${cod}:${year}:${month}
  return this.http.get<SomeType>(url)
}

我想了很久 if/else 但我想考虑被动。不幸的是，我没有成功。

综上所述。我想根据 url 中的最后一个字符串进行不同的 http 调用。我如何制作一个流并对其进行编排？

我对此的思考过程如下：
1. 在我的 auth.service.ts 中创建 cod 的 getter（保存在 sessionStorage 中）
2.在我的main.service.ts中设置一个BehaviorSubject，存放当前url的最后一个字符串。
3. 为 year、month 和 lastUrlString
设置 BehaviorSubjects 4. 设置方法将BehaviorSubject的值更改为.next。每人一个 5. 在容器中，当用户更改 year 或 month 并单击 search 时调用 subject.next(value) 方法并更改年份和月份。

之后。我已经用可观察对象、订阅、取消订阅等做了很多事情。我总是遇到不同的错误。

此致。

Answer 1

我不确定我是否完全理解你的问题，但这里是一个基于我认为你想做的事情的答案。如果您的 url 看起来像这样 /url/:param，您应该使用激活的路由来获取当前参数，或者如果您的 url 看起来像这样 /url?param=value，则获取当前查询。

当您希望为您的服务提供信息时，您可以使用 ActivatedRoute 创建一个可观察对象，每当您使用导航栏进行导航时，它都会进行 api 调用。

export class SomeService {
  tableInfo$ = this.route.paramMap.pipe(
    filter(paramMap => !!paramMap.get("param"))
    switchMap(paramMap => this.http.get('/api/' + param.get("param"))
  );

  constructor(private route: ActivatedRoute, private http: HttpClient) {}
}

您可以在您的模板中使用 AsyncPipe 或仅在您的 ngOnInit 中订阅此可观察对象。

Answer 2

我解决了这个问题。

月和年可观察值

反应形式的每个抽象控件都有一个我可以订阅的 valueChanges 可观察对象。因此，我在每次单击 search 按钮时将这些更改 + 和事件发射器链接到父组件。

this.searchBarForm.valueChanges.subscribe(res => {
       (this.mes = res.mes), (this.ano = res.ano);
     })

 buscarTrigger() {
     this.mes$ = of(this.mes);
     this.ano$ = of(this.ano);
     const fecha$: MesAno = { mes$: this.mes$, ano$: this.ano$ };
     this.onBuscar.emit(fecha$);
      this.onBuscar.emit({mes: this.mes, ano: this.ano})
   }

http 请求可观察

正如@observingstream 在 ngOnInit 中提到的，我订阅了路由参数。我将它的结果分配给一个可观察变量。

this.table$ = combineLatest<Observable<DatoListaAmarilla[]>>(
        this.ruta$,
        data.ano$,
        data.mes$
      ).pipe(
        switchMap(([url, ano, mes]) =>
          this.tarjetaAmarillaService
            .getItems(url, ano, mes)
            .pipe(tap(console.log))
        )
      );

剩下的就是用 | async

在模板中管道化它