Question

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

主要组成部分

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

app-search组件的格式很简单，您可以选择year，month并单击search

信息以@Output()开头，主容器中有一个http请求，信息通过app-table下降到@Input。

然后，有一个导航栏，其中包含约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，但我想考虑被动。不幸的是，我没有成功。

总结。我想根据http中的最后一个字符串进行不同的url调用。我该如何制作视频流并将其编排？

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

在此之后。我在可观察性，订阅性，取消订阅性等方面做了很多事情。我一直都遇到不同的错误。

致谢。

Answer 1

我不确定我是否完全理解您的问题，但这是基于我想您想做的事情的答案。如果您的网址看起来像/url/:param，则应该使用激活的路由来获取当前参数，如果您的网址看起来像/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请求

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

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

将其管道输送到模板中

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

2 个答案:

可观察的月份和年份

可观察到http请求