Angular 2 Beta - 向组件注入 http 数据服务时出现问题

Question

我是 Angular2 的新手，具有 Angular 1.3 经验我正在尝试构建一个大型 Angular2 应用程序以了解每个功能的连接方式（模板语法，DI，路由，可观察）。实际上我面临的问题是在尝试创建一个单独的数据服务并将所有 HTTP 调用并将其注入其他 components.Below 代码时我收到此错误 EXCEPTION: No provider for ConnectionBackend!

我还需要帮助删除仪表板摘要中的冗余导入。

DashboardHTTPSevice

import {Http, Response} from 'angular2/http'
import {Injectable} from 'angular2/core'

@Injectable()
export class DashboardHTTPSevice {

    http:Http;
    constructor(http:Http){
        this.http = http;
    }

    getSummary(){
        return this.http.get('api/dashboardSummary').map((res: Response) => res.json());
    }

}

仪表板摘要

import {Component} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/Rx' ;
import {DashboardHTTPSevice} from 'app/services/dashboardHTTPSevice';


@Component({
    selector: 'dashboard-summary',
    templateUrl: './app/admin/dashboard/summary/summary.component.html',
    styleUrls: ['./app/admin/dashboard/summary/summary.style.css'],
    viewProviders: [HTTP_PROVIDERS],
    providers : [DashboardHTTPSevice]

})

export class SummaryComponent { 

    public dashboardSummary;
    constructor (public http: Http , dataservice : DashboardHTTPSevice){

    dataservice.getSummary().
            .subscribe(summary => {
                console.log(summary.data);
                this.dashboardSummary = summary.data;
            });        
    }
}

Bootstrap

import {bootstrap}    from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent} from './app.component';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {DashboardHTTPSevice} from 'app/services/dashboardHTTPSevice';


bootstrap(AppComponent , ROUTER_PROVIDERS , HTTP_PROVIDERS,DashboardHTTPSevice);

来源： https://github.com/sabha/angular2_store

演示： http://demoapp-angular2store.rhcloud.com/client/index.html

Answer 1

将ROUTER_PROVIDERS、HTTP_PROVIDERS和DashboardHTTPService放入数组。

bootstrap(AppComponent , [ROUTER_PROVIDERS , HTTP_PROVIDERS, DashboardHTTPSevice]);

参见 bootstrap 函数的签名 here:

Answer 2

只是想更新这个答案。

对于 post Angular 2 RC 版本，您需要导入 HttpModule。

Angular 2 Beta - 向组件注入 http 数据服务时出现问题

Angular 2 Beta - issue while Injecting http data service to component

angular

angular2-services