Question

我想要实现的目标是在angular2中使用HTTP.Get来使用Restfull服务，我只是按照一些教程阅读文档，但我仍然无法获得它

以下是我的工作，首先是我的应用程序结构，我使用Angular CLI Webpack创建了这个项目

然后我使用angular CLI命令创建了一个服务类，＆＃34; ng generate service restfull＆＃34;然后我更新了我的课程，所以restfull.service.ts看起来像这样：

import { Injectable } from '@angular/core';
import { HTTP_PROVIDERS, HTTP_BINDINGS, Http, Response} from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class RestfullService {

  constructor(private http:Http) { }

  getDashboard(){
    return this.http.get('http://localhost:8080/localservice/getdashboard/HUT17').map((res:Response) => res.json());
  }

}

然后这是我的app.component.ts

import { Component } from '@angular/core';
import { NavbarComponent } from './navbar';
import { RestfullService } from './restfull.service';
import { Observable } from 'rxjs/Rx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [NavbarComponent],
  providers: [RestfullService]
})

export class AppComponent {
  title = 'app works!';

  public active;

  constructor(private _restfull: RestfullService) { }

  getRest(){
    this._restfull.getDashboard().subscribe(
      data => {this.active = data},
      err => console.error(err),
      () => console.log('done loading foods')
    );
  }
}

我认为我需要的只是对吗？我错过了什么？它在我的firebug控制台中向我显示了这个错误：

错误：未捕获（在承诺中）：EXCEPTION：./AppComponent类中的错误   AppComponent_Host - 内联模板：0：0原始例外：否   Http的提供者！原装STACKTRACE：   BaseException @ http://localhost:4200/main.bundle.js:1811:23   AbstractProviderError @ http://localhost:4200/main.bundle.js:28260:9   NoProviderError @ http://localhost:4200/main.bundle.js:28297:9   ReflectiveInjector_throwOrNull @ http://localhost:4200/main.bundle.js:56208:19 ReflectiveInjectorgetByKeyDefault @ http://localhost:4200/main.bundle.js:56236:20   ReflectiveInjectorgetByKey @ http://localhost:4200/main.bundle.js:56199:20   ReflectiveInjectorhttp：//本地主机：4200 / main.bundle.js：56008：16   NgModuleInjectorhttp：//本地主机：4200 / main.bundle.js：40727：40   anonymous/_View_AppComponent_Host0.prototype.createInternal@AppComponent.ngfactory.js：18：56   AppViewhttp：//本地主机：4200 / main.bundle.js：56772：16   DebugAppViewhttp：//本地主机：4200 / main.bundle.js：56985：20   ComponentFactoryhttp：//本地主机：4200 / main.bundle.js：40380：27   ApplicationRef_http：//本地主机：4200 / main.bundle.js：27082：23   PlatformRef_moduleDoBootstrap /＆LT; @ http://localhost:4200/main.bundle.js:26940:82   PlatformRefmoduleDoBootstrap @ http://localhost:4200/main.bundle.js:26940:13   PlatformRefhttp：//本地主机：4200 / main.bundle.js：26919：21   Zonehttp：//本地主机：4200 / polyfills.bundle.js：3389：20   NgZoneImpl / this.inner＆LT; .onInvoke @ http://localhost:4200/main.bundle.js:44849:32   Zonehttp：//本地主机：4200 / polyfills.bundle.js：3388：20   Zonehttp：//本地主机：4200 / polyfills.bundle.js：3282：25   scheduleResolveOrReject /＆LT; @ http://localhost:4200/polyfills.bundle.js:3637:53   Zonehttp：//本地主机：4200 / polyfills.bundle.js：3422：24   NgZoneImpl / this.inner＆LT; .onInvokeTask @ http://localhost:4200/main.bundle.js:44840:32   Zonehttp：//本地主机：4200 / polyfills.bundle.js：3421：24   Zonehttp：//本地主机：4200 / polyfills.bundle.js：3322：29   drainMicroTaskQueue @ http://localhost:4200/polyfills.bundle.js:3540:26

错误上下文：[object Object]

我认为关键是＆＃34;没有提供http＆＃34;对？但是我已经把它放在resfull.service.ts课上，我错过了什么？

Answer 1

您必须为您的应用提供HTTP_PROVIDERS，如下所示：

@Component({
    selector: 'app',
    templateUrl: 'app.component.html',
    providers: [
        HTTP_PROVIDERS
    ],
    directives: []
})
export class AppComponent {
...
}

Answer 2

从RC.5开始，您应该在根模块中导入HttpModule（通常为app.module.ts），如下所示：

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule, // here
        ...
    ],
    declarations: [
        AppComponent,
        ...
    ],
    providers: [
        ...
    ],
    bootstrap: [...]
})
export class AppModule { }

原始例外：没有Http的提供商！尝试使用HTTP.GET

2 个答案: