Angular 获取查询参数并调用服务

Question

我的 angular 应用程序出现问题。我必须调用服务从 url 读取一些参数。它不起作用，因为该服务在完成订阅以完成参数之前被触发。在我的服务文件中我有这个：

constructor(private http: HttpClient, private route: ActivatedRoute) { 
    this.route.queryParams.subscribe(params => {
      this.param1 = params['param1'];
      this.param2 = params['param2'];
    });
  }

然后是服务：

getConfigs() {
    let configPath = baseUrl + this.param1 + "/" + this.param2;
    return this.http.get<any>(configPath);
  }

所以，在我的 AppComponent 中，我调用了 getConfigs() 服务，但它不起作用，因为两个参数未定义。我该如何解决？这就是我在 AppComponent

中调用服务的方式

this.service.getConfigs().subscribe((configData) => {
      this.configParams = configData;
    });

Answer 1

您需要将值传递给服务。

this.service.getConfigs(this.param1, this.param2).subscribe((configData) => {
      this.configParams = configData;
});

getConfigs(param1, param2) {
    let configPath = baseUrl + param1 + "/" + param2;
    return this.http.get<any>(configPath);
  }

Answer 2

您可以使用像 switchMap 这样的 RxJS 高阶映射运算符来链接 co-dependent observables。尝试以下

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

getConfigs() {
  return this.route.queryParams.pipe(
    switchMap(params => {
      let configPath = baseUrl + params['param1'] + "/" + params['param2'];
      return this.http.get<any>(configPath);
    })
  );
}

虽然我会说在组件而不是服务中获取路由参数更好。所以你可以做类似下面的事情

服务

constructor(private http: HttpClient) { }

getConfigs(param1: any, param2: any) {
  const configPath = baseUrl + param1 + '/' + param2;
  return this.http.get<any>(configPath);
}

组件

constructor(private someService: SomeService, private route: ActivatedRoute) { }

ngOnInit() {
  this.route.queryParams.pipe(
    switchMap(params => this.someService.getConfigs(params['param1'], params['param2']))
  ).subscribe(
    ...
  );
}

Answer 3

从路由器获取查询参数，并使用first()运算符仅获取第一个事件，然后使用switchMap()获取带有params选项的数据。

  constructor(
    private _http: HttpClient,
    private _route: ActivatedRoute,
  ) { }

  getConfigs() {
    return this._route.queryParams.pipe(
      // rxjs operator skip empty object
      filter(params => !!Object.keys(params).length),
      // rxjs operator use only first event
      first(),
      // rxjs operator switch to another observable
      switchMap(params => this._http.get('host', { params })),
    );
  }

Angular 获取查询参数并调用服务

Angular get query param and call service

angular

typescript

subscribe

query-parameters

angular-activatedroute