Fai*_*br0 11 service http angular
我试图使用angular2 http请求,但我收到以下错误:[错误]例外:没有ConnectionBackend的提供程序!(AppComponent - > Http - > ConnectionBackend)
我已经设置了一个具有相同问题的准系统应用程序,并且对导致它的原因感到茫然.
提前致谢
app.component.ts
import {Component} from 'angular2/core';
import {Http, Headers} from 'angular2/http';
@Component({
selector: 'app',
template: `
<button (click)="getEmployee()">Get</button>
<p>{{employee.email}}</p>
`,
providers: [Http]
})
export class AppComponent {
employee: {"email": "bob"};
http: Http;
constructor(http:Http){
this.http = http;
}
getEmployee(){
this.http.get('localhost:8080/employee-rates?id=0')
.map(response => response.json()).subscribe(result => this.employee = result);
}
}
main.ts
import {AppComponent} from './app.component';
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS, HTTP_BINDINGS} from 'angular2/http';
bootstrap(AppComponent, [
HTTP_PROVIDERS, HTTP_BINDINGS
]);
的index.html
<html>
<head>
<base href="/">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/es6-shim/es6-shim.min.js"></script>
<script src="js/systemjs/dist/system-polyfills.js"></script>
<script src="js/angular2/bundles/angular2-polyfills.js"></script>
<script src="js/systemjs/dist/system.src.js"></script>
<script src="js/rxjs/bundles/Rx.js"></script>
<script src="js/angular2/bundles/angular2.dev.js"></script>
<script src="js/angular2/bundles/http.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<div class='small-12'>
<app>Loading...</app>
</div>
</body>
</html>
Ant*_*ère 20
从Angular 2 RC5版本,在您的NgModule文件中,添加:
import { HttpModule } from '@angular/http';
@NgModule({
imports: [
...
HttpModule ]
Sas*_*sxa 11
HTTP_BINDINGS从您的代码中删除.它们已被弃用和引用HTTP_PROVIDERS,因此就像您使用提供程序两次一样.
bootstrap(AppComponent, [HTTP_PROVIDERS]);
您也不需要providers: [Http]在组件中,因为您注入HTTP_PROVIDERS了引导程序.将其添加到组件的提供者将创建服务的新实例.
@Component({
providers: []
})