时间戳

首页 > 解决方案 > 反应式地根据路由在同一容器中的不同http请求[RXJS]

angular - 反应式地根据路由在同一容器中的不同http请求[RXJS]

问题描述

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

主要成分

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

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

info以 s 上升，主容器中有一个 http 请求，info以s@Output()下降。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. 设置BehaviorSubjects 为: year, month, 和lastUrlString
4. 设置改变BehaviorSubject' 值的方法.next。每个5个。在容器中当用户更改year或month单击时search调用subject.next(value)方法并更改年份和月份。

在这之后。我在可观察、订阅、取消订阅等方面做了很多事情。我总是遇到不同的错误。

问候。

标签： angularrxjsangular6reactive-programming

解决方案

我不确定我是否完全理解您的问题，但这里有一个基于我认为您想要做的答案。如果您的 url 看起来像这样，您应该使用激活的路由来获取当前参数，或者如果您的 url 看起来像这样/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 在模板中订阅此 observable，也可以仅订阅 ngOnInit。

推荐阅读