以Angular5处理jsonp
因为我只稍微接触过Angular2的时代,所以当我突然想使用Angular5时,发现有很多变化让我感到困扰。
HttpClient模块和HttpClientJsonp模块
这是一个似乎是从Angular 4.3版本开始新增的模块吗?
参考:关于Angular 4.3新增的HttpClientModule的备注
为了在HttpClient模块中支持jsonp,需要导入HttpClientJsonpModule模块。由于学习不足,无法了解它的具体实现方式。
基本上,需要在NgModule装饰器中按照以下方式导入上述两个模块。
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更好。