在Angular 2 RC 4中,我有一个类HttpLoading扩展了Angular 2的原始Http服务.
原文链接:https://www.f2er.com/angularjs/140465.html使用RC 4,我可以在bootstrap中使用它,没有任何问题使用下面的代码:
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); } }
使用角度2 RC 5,引导方式已经改变,我们现在需要有NgModule和bootstrap.我已经遵循迁移指南,并在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,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,globalService: GlobalService) => new HttpLoading(backend,defaultOptions,globalService),GlobalService] },GlobalService ],bootstrap: [AppComponent],}) export class AppModule { }
但是现在当我在组件中使用它时,它没有向服务器发送任何请求,并且在控制台中通过以下错误:
EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'toString' of null
我使用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) => { }); } }
有人可以引导吗?