LoginSignup
3
3

More than 5 years have passed since last update.

Angular5でのjsonpの取扱

Posted at

Angular2の時代に少しかじった程度なので、Angular5をいきなり使おうとしたら色々変わっていて困った。

HttpClientModuleとHttpClientJsonpModule

Angular4.3から追加されたモジュールらしい?
参考: Angular 4.3で追加されたHttpClientModuleについてのメモ

HttpClientJsonpModuleはHttpClientモジュールでjsonpをサポートするためにimportする必要があるモジュール
勉強不足のためどのような実装になっているかは分からない

基本的には下記の通りにNgModuleデコレータ無いで上記2モジュールをimportする必要がある。

import { NgModule } from '@angular/core';
import {HttpClientModule, HttpClientJsonpModule} from '@angular/common/http';

@NgModule(
{...
imports: [...
HttpClientModule,
HttpClientJsonpModule,
...]
...
})
export class AppModule{ }

jsonpの受け取り方

DIされたHttpClientからjsonp関数を呼ぶことでjsonpオブジェクトを受け取る。
参考: Angular.io HttpClient#jsonp


import { Injectable } from '@angular/core';
import {HttpClient, HttpParams} from '@angular/common/http';
import {tap} from 'rxjs/operators';

@Injectable()
export class HttpService {
  APIURL: string;
  constructor(private http: HttpClient) {}
  logData(param: HttpParams): void{
    this.http.jsonp<Object[]>(`$(this.APIURL)?${param.toString()}`, 'callback')
      .pipe(tap(console.log))
  } 

}

昔使ったことあるから楽だと思ってAngularを使ってみたが、以外と手間がかかった。
記事も少ないしReact使ったほうがいいのかな、分かりません

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3