teratail
回答率
85.36%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問AngularでHttpClientを利用して外部インターネットから取得した変数を別ファイルでも利用できるようにしたい

編集履歴

質問編集履歴

3

タイトルを具体化

2021/01/09 05:14

投稿

rakiiiii
rakiiiii

スコア1

test CHANGED
@@ -1 +1 @@
1
- Angularでsubscribe内で取得した変数を外部から読み込みたい
1
+ AngularでHttpClientを利用して外部インターネットから取得した変数を別ファイルでも利用できるようにしたい
test CHANGED
File without changes

2

かなり抽象化していたコードを具体化しました。

2021/01/09 05:14

投稿

rakiiiii
rakiiiii

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- # 前提/動作内容
1
+ # 前提
2
2
 
3
3
 
4
4
 
@@ -6,19 +6,23 @@
6
6
 
7
7
 
8
8
 
9
- それぞれ、上段がservice.ts、下段がtest.component.tsというファイルです。
9
+ Test.component.tsではAngularのHttpClientを利用して外部ネットワークに格納されているpageSize配列の0番目を取得しています。（取得できています。）
10
10
 
11
- test.component.tsではservice.tsで定義しているTestFuncという関数(Observable)を参照して、this.responseという値を取得します。
11
+
12
12
 
13
13
 
14
14
 
15
15
  #質問内容
16
16
 
17
- service.tsの「hoge = "10"」となっているところの"10"を、test.component.tsの「this.response」の値("10"が格納されているとします。)を代入したいのです。
17
+ TestService.tsの「postParam = postParam.set('pageSize','100')」となっているところの'100'を、test.component.tsの「this.response」の値('100'が格納されています。)を代入したいのです。
18
18
 
19
19
 
20
20
 
21
+ つまり、
22
+
23
+ 「postParam = postParam.set('pageSize',**'100'**)」を
24
+
21
- つまり、**「hoge = "10"」を「hoge = this.response」のような形で表したい**のですが、方法があればお教えいただけないでしょうか。
25
+ 「postParam = postParam.set('pageSize',**this.response**)」のような形で表したいのですが、方法があればお教えいただけないでしょうか。
22
26
 
23
27
 
24
28
 
@@ -30,27 +34,71 @@
30
34
 
31
35
 
32
36
 
33
- ```Angular
34
37
 
35
- // Service.ts
36
38
 
37
- export class TestService
39
+ ### urlEncoder.ts
38
40
 
39
- TestFunc(): Observable<any> {
41
+ ```TypeScript
40
42
 
41
- let hoge: any
43
+ import { HttpParameterCodec } from '@angular/common/http';
42
44
 
45
+
46
+
47
+ export class UrlEncoder implements HttpParameterCodec {
48
+
49
+ encodeKey(key: string): string {
50
+
51
+ return encodeURIComponent(key);
52
+
53
+ }
54
+
55
+ }
56
+
57
+ ```
58
+
59
+ ###TestService.ts
60
+
61
+ ```TypeScript
62
+
63
+ import { HttpClient, HttpParams } from '@angular/common/http';
64
+
65
+ import { UrlEncoder } from 'urlEncoder.tsのパス';
66
+
67
+
68
+
43
- hoge = "10";
69
+ export class TestService{
70
+
71
+ constructor(private http: HttpClient) { };
72
+
73
+
74
+
75
+ private setRequestParams(): HttpParams{
76
+
77
+ let httpParams: HttpParams = new HttpParams({ encoder: new CustomURLEncoder() });
78
+
79
+ httpParams = httpParams.set('hoge', '1'); //http://-----&hoge=1 になります。
80
+
81
+ }
82
+
83
+
84
+
85
+ paramsGet(path: string, postParams: any = {}): Observable<any> {
86
+
87
+ let postParam: HttpParams = this.setRequestParams();
88
+
89
+ postParam = postParam.set('pageSize','100')//'100'の部分をthis.responseの値を参照したい。
90
+
91
+ return this.http.get(path, { params: postParam });
44
92
 
45
93
  }
46
94
 
47
95
  };
48
96
 
97
+ ```
49
98
 
99
+ ###test.component.ts
50
100
 
51
- ===============================================
52
-
53
- //Test.component.ts
101
+ ```TypeScript
54
102
 
55
103
  import TestService from {'Service.tsのパス'};
56
104
 
@@ -72,33 +120,23 @@
72
120
 
73
121
  )
74
122
 
75
-
76
-
77
- public response: any;
78
123
 
79
124
 
125
+ ngOnInit(){
80
126
 
81
- this.test.TestFunc().subscribe(res => {
127
+ this.test.paramsGet('http://------').subscribe(res => {
82
128
 
83
- this.response = res.array[0] //このとき、this.responseには"10"が入っている
129
+ this.response = res.pageSize[0] //外部インターネット上のpageSize配列の0番目を取得
84
130
 
131
+ }
132
+
85
- console.log(this.response) //"10"が表示される
133
+ )
86
134
 
87
135
  }
88
-
89
- console.log(this.response) // undefinedが表示される
90
-
91
-
92
-
93
-
94
-
95
- )
96
136
 
97
137
 
98
138
 
99
139
  }
100
-
101
-
102
140
 
103
141
  ```
104
142
 
@@ -110,4 +148,4 @@
110
148
 
111
149
  初心者のため的外れかもしれませんが、this.response廻りをexportできないか試しましたがエラーでした。
112
150
 
113
- this.test.TestFunc().略(　略　)の外からはthis.test.TestFunc().略(　略　)内のthis.responseを参照できないことは理解しています。
151
+ this.test.paramsGet().略(　略　)の外からはthis.test.paramsGet().略(　略　)内のthis.responseを参照できないことは理解しています。

1

hoge = hoge.set("10")をhoge = "10"に変更しました。（記載ミスですが、質問内容は変わりません。）

2021/01/09 04:17

投稿

rakiiiii
rakiiiii

スコア1

test CHANGED
File without changes
test CHANGED
@@ -14,11 +14,11 @@
14
14
 
15
15
  #質問内容
16
16
 
17
- service.tsの「hoge = hoge.set("10")」となっているところの"10"を、test.component.tsの「this.response」の値("10"が格納されているとします。)を代入したいのです。
17
+ service.tsの「hoge = "10"」となっているところの"10"を、test.component.tsの「this.response」の値("10"が格納されているとします。)を代入したいのです。
18
18
 
19
19
 
20
20
 
21
- つまり、**「hoge = hoge.set("10")」を「hoge = hoge.set(this.response)」のような形で表したい**のですが、方法があればお教えいただけないでしょうか。
21
+ つまり、**「hoge = "10"」を「hoge = this.response」のような形で表したい**のですが、方法があればお教えいただけないでしょうか。
22
22
 
23
23
 
24
24
 
@@ -40,7 +40,7 @@
40
40
 
41
41
  let hoge: any
42
42
 
43
- hoge = hoge.set("10");
43
+ hoge = "10";
44
44
 
45
45
  }
46
46