AngularでHttpClientを利用して外部インターネットから取得した変数を別ファイルでも利用できるようにしたい

Question

前提

AngularでWebアプリを開発している中での質問です。（超初心者です。）

Test.component.tsではAngularのHttpClientを利用して外部ネットワークに格納されているpageSize配列の0番目を取得しています。（取得できています。）

#質問内容
TestService.tsの「postParam = postParam.set('pageSize','100')」となっているところの'100'を、test.component.tsの「this.response」の値('100'が格納されています。)を代入したいのです。

つまり、
「postParam = postParam.set('pageSize','100')」を
「postParam = postParam.set('pageSize',this.response)」のような形で表したいのですが、方法があればお教えいただけないでしょうか。

何卒よろしくお願いいたします。

該当のソースコード

urlEncoder.ts

import { HttpParameterCodec } from '@angular/common/http';

export class UrlEncoder implements HttpParameterCodec {
  encodeKey(key: string): string {
    return encodeURIComponent(key);
  }
}

###TestService.ts

import { HttpClient, HttpParams } from '@angular/common/http';
import { UrlEncoder } from 'urlEncoder.tsのパス';

export class TestService{
  constructor(private http: HttpClient) { };

  private setRequestParams(): HttpParams{
    let httpParams: HttpParams = new HttpParams({ encoder: new CustomURLEncoder() });
    httpParams = httpParams.set('hoge', '1'); //http://-----&hoge=1 になります。
  }

  paramsGet(path: string, postParams: any = {}): Observable<any> {
          let postParam: HttpParams = this.setRequestParams();
          postParam = postParam.set('pageSize','100')//'100'の部分をthis.responseの値を参照したい。
          return this.http.get(path, { params: postParam });
    }
};

###test.component.ts

import TestService from {'Service.tsのパス'};

@component{
  略
}

export class TestComponent implements OnInit{
  constructor(
    private test: TestService,
  )

  ngOnInit(){
    this.test.paramsGet('http://------').subscribe(res => {
      this.response = res.pageSize[0] //外部インターネット上のpageSize配列の0番目を取得
    }
    )
  }

}

試したこと

初心者のため的外れかもしれませんが、this.response廻りをexportできないか試しましたがエラーでした。
this.test.paramsGet().略(　略　)の外からはthis.test.paramsGet().略(　略　)内のthis.responseを参照できないことは理解しています。

Comments

[miyabi_pudding]

型がanyだと、そもそもsetメソッドがあるかどうかもわからないかと思いますが・・・。
そのsetメソッドはどんなものでしょうか？
質問者さんの定義したメソッドですか？

[rakiiiii]

ご質問ありがとうございます。
コードをかなり抽象化して載せておりましたので、具体化しました。
以前のコードとは別物になっているため説明は不要かもしれませんが、setはAngularのHttpClient側で定義されているものとなっております。

[miyabi_pudding]

つまり、
paramsGetで非同期で取得した値を使い、
paramsGetの中の処理を続けたい、ってことでしょうか？

[rakiiiii]

おっしゃる通りです。
pageSizeのような環境変数(？)をコードに直接書くのではなく、決まった場所から取得したいという意図があります。

そもそも値を取得するためにparamsGetを用いる必要があるのですが、可能でしょうか。

[miyabi_pudding]

あれ、でも、
最初の実行では、
paramsGetを実行した時、
"100"という固定値で、
値は取得できてるんですよね？
初回は固定値でいいということですか？

[rakiiiii]

このparamsGetはtest.component.tsのpageSize取得以外にも用いられているので、
paramsGetのみで実装ができないようであれば、
pageSize取得用のparamsGetPageSize(固定値100)を作成し、
他の処理にも用いられるparamsGet(this.responseの値を参照)とは
別で扱うことを検討しています。
（miyabi_takatsuk様のおっしゃる初回は固定値、と同じでしょうか？）
私には、もしこの方法を実行するとしても、this.responseの値をどうやって外に出せばいいのかわからないのです・・・。

[miyabi_pudding]

だったら、別メソッドを定義した方がいいですね。

回答に移ります。

Answer 1

ちょっと、野暮いですが、下記でいかがかと。
サービスクラスにプロパティを定義し、その値を使う手法です。

import { HttpClient, HttpParams } from '@angular/common/http';
import { UrlEncoder } from 'urlEncoder.tsのパス';

export class TestService{
  // 外部から取得可能なプロパティを用意
  public res = "";
  constructor(private http: HttpClient) { }

  private setRequestParams(): HttpParams{
    let httpParams: HttpParams = new HttpParams({ encoder: new CustomURLEncoder() });
    httpParams = httpParams.set('hoge', '1'); //http://-----&hoge=1 になります。
  }

  paramsGet(path: string, postParams: any = {}): Observable<any> {
          let postParam: HttpParams = this.setRequestParams();

          // 固定値を使用
          postParam = postParam.set('pageSize', '100');
          return this.http.get(path, { params: postParam });
    }

    paramsGetPageSize(path: string, postParams: any = {}): Observable<any> {
          let postParam: HttpParams = this.setRequestParams();

          // resプロパティを使ってリクエスト
          postParam = postParam.set('pageSize', this.res);
          return this.http.get(path, { params: postParam });
    }
};

import TestService from {'Service.tsのパス'};

@component{
  略
}

export class TestComponent implements OnInit{
  constructor(
    private test: TestService,
  )

  ngOnInit(){
    this.test.paramsGet('http://------').subscribe(res => {
      this.response = res.pageSize[0] //外部インターネット上のpageSize配列の0番目を取得

      // サービスのプロパティに代入
      this.test.res = this.response;

      // 今度は、paramsGetを実行
      this.test.paramsGetPageSize('http://------').subscribe(res => {
        // 処理
      });
    }
    );
  }

}

あとは、メソッド名や役割などは適せん調整して下さい。

あと、蛇足ですが、セミコロンの必要箇所といらない箇所があべこべになっているので、そこは一応勉強したほうがいいかと。
（上記は多少直してます）

Comments

[rakiiiii]

ありがとうございます、TestService側でresponseを読み込むことができました。
ただ一点、非同期通信の弊害か、Service側で
postParam = postParam.set('pageSize', this.res);
の前にthis.resをログで表示すると、undefinedと表示され、
component側で読み込んだ内容が表示されませんでした。
https://teratail.com/questions/129464?link=qa_related_pc
の方の質問が類似しているように見えましたので、
参照していじってみたのですが、うまくいきませんでした・・・。
可能であればこちらもご教授いただけないでしょうか。
難しそうであれば本質問はクローズさせていただき、別途質問を作成します。
(追伸)
セミコロンに関してはおっしゃる通りです、今まで特に考えずに書いていたため、勉強しなおします！

[miyabi_pudding]

> の前にthis.resをログで表示すると、undefinedと表示され、

それは当たり前です。
現状、コンポーネント側からしか、
サービスクラス.resに代入を行なっていませんので。

いつ・何を・どこで・どうするか、
を意識して構文組みましょう。
ようは、4W1Hです。

> 難しそうであれば本質問はクローズさせていただき、別途質問を作成します。

そうですね。
難しいというより、質問要件は満たしておりますので、
上記4W1Hを整理して質問し直すとよいかと。
現状の質問だと、いつ・どこで・取得したいか、
が非常に曖昧なので。