Angular 2 RC 5 Bootstrap 自定义 HTTP 类
Posted
技术标签:
【中文标题】Angular 2 RC 5 Bootstrap 自定义 HTTP 类【英文标题】:Angular 2 RC 5 Bootstrap custom HTTP class 【发布时间】:2016-12-17 13:49:19 【问题描述】:在 Angular 2 RC 4 中,我有一个类 HttpLoading,它扩展了 Angular2 的原始 Http
我可以使用以下代码在引导程序中使用它而没有任何问题:
bootstrap(AppComponent, [
HTTP_PROVIDERS,
provide(RequestOptions, useClass: DefaultRequestOptions ),
provide(Http,
useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new HttpLoading(backend, defaultOptions),
deps: [XHRBackend, RequestOptions]
)
]).catch(err => console.error(err));
我的 DefaultRequest 选项类
import Injectable from '@angular/core';
import Headers, BaseRequestOptions from '@angular/http';
@Injectable()
export class DefaultRequestOptions extends BaseRequestOptions
headers: Headers = new Headers(
'Content-Type': 'application/json'
);
我的 HttpLoading 类如下所示:
import Http, RequestOptionsArgs, ConnectionBackend, RequestOptions, Response from '@angular/http'
import Injectable from '@angular/core'
import GlobalService from './globalService';
import Observable from 'rxjs/Observable';
export class HttpLoading extends Http
constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private _globalService: GlobalService)
super(backend, defaultOptions);
get(url: string, options?: RequestOptionsArgs): Observable<any>
this._globalService.isLoading = true;
return super.get(url, options)
.map(res =>
this._globalService.isLoading = false;
return res.json();
)
.catch(this.handleError);
对于 RC 5,我不确定如何将这部分代码迁移到 NgModule 提供程序列表。
我已遵循迁移指南并将我的 NgModule 更新为以下内容:
import NgModule from '@angular/core';
import BrowserModule from '@angular/platform-browser';
import FormsModule, ReactiveFormsModule from '@angular/forms';
import HttpModule from '@angular/http';
import Http, HTTP_PROVIDERS, RequestOptions, XHRBackend from '@angular/http';
import DefaultRequestOptions from './DefaultRequestOptions';
import HttpLoading from './http-loading';
import routing from './app.routing';
import AppComponent from './components/app.component';
@NgModule(
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
routing
],
declarations: [
AppComponent
],
providers: [
HTTP_PROVIDERS,
provide: RequestOptions, useClass: DefaultRequestOptions ,
provide: Http,
useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, globalService: GlobalService) => new HttpLoading(backend, defaultOptions, globalService),
deps: [XHRBackend, RequestOptions, GlobalService]
],
bootstrap: [AppComponent],
)
export class AppModule
但它似乎仍然没有正确添加,因为在我的组件中,当我使用 http 时,它仍然使用默认 http 而不是我的自定义 http 服务。
import Component, OnInit from '@angular/core';
import Http from '@angular/http';
@Component(
templateUrl: '../../templates/home/home.html'
)
export class HomeComponent implements OnInit
constructor(private http: Http)
ngOnInit()
this.http.get('/home')
.subscribe((data) =>
);
谁能指导一下?
【问题讨论】:
【参考方案1】:由于>=RC5
现在您引导@NgModule
类而不是像这样的根组件,请阅读this RC4 => RC5 transition guide 的更多信息。
import NgModule from '@angular/core';
import HttpModule from '@angular/http';
import AppComponent from './app.component';
@NgModule(
declarations: [
AppComponent
],
imports: [HttpModule], // no need for HTTP_DIRECTIVES
providers: [
provide: RequestOptions, useClass: DefaultRequestOptions ,
provide: Http, useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new HttpLoading(backend, defaultOptions), deps: [XHRBackend, RequestOptions]
],
bootstrap: [AppComponent]
)
export class AppModule
platformBrowserDynamic().bootstrapModule(AppModule);
【讨论】:
感谢您的回复。我已经遵循了这个迁移指南,并且几乎完成了您在回答中提到的内容,但仍然没有成功。我已经用我的 NgModule 更新了我的问题,你能看看并指导一下究竟出了什么问题吗?But it still seems that its not properly added because in my component when I use http its still hitting the default http instead of my custom http service.
我不确定这是什么意思。你能解释一下吗?
实际上我收到此错误“错误:未捕获(承诺中):TypeError:无法读取属性'toString' of null”
几乎可以肯定这不是由更改上述代码引起的,它来自其他一些代码,您可以通过扩展错误并查看源代码在控制台中进行跟踪,如果不是我建议您可以使用相关代码和错误屏幕截图创建一个新问题。最好的
它实际上不起作用,调用了 HttpLoading 中的 get 方法(我通过日志确认了它)但未发送请求(网络日志不显示任何活动)并且控制台显示错误“错误:未捕获(承诺):TypeError:无法读取属性'toString' of null”。我将我的 DefaultRequestOptions 添加到我的问题中,请您看看是否有问题?【参考方案2】:
非常感谢大家的帮助,我能够通过删除解决问题
provide: RequestOptions, useClass: DefaultRequestOptions ,
这对于 RC 5 来说似乎是不必要的。
【讨论】:
【参考方案3】:我遇到了同样的问题...将正文设置为空字符串解决了它。
所以get可以接收第二个参数“RequestOptions”...一定要设置body属性为''
像这样 ...
.http.get(BaseService.apiUrl + api/someMethod
, body : '' )
...
【讨论】:
以上是关于Angular 2 RC 5 Bootstrap 自定义 HTTP 类的主要内容,如果未能解决你的问题,请参考以下文章
使用 AngularFire2 (Angular2 rc.5) 访问 firebase.storage()
Angular 5 ng-bootstrap 类型“ElementRef”不是通用错误