加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Angular2 rc5:没有Http的提供者

发布时间:2020-12-17 07:18:13 所属栏目:安全 来源:网络整理
导读:我正在尝试将一个角度2应用程序移植到RC5,但我遇到了一个问题:我无法通过模块正确设置应用程序. 有一个名为CustomersService的服务,它通过Http检索客户数据.我创建了一个导入HttpModule并提供CustomersService的App Module.在另一个名为HomeModule的模块中,
我正在尝试将一个角度2应用程序移植到RC5,但我遇到了一个问题:我无法通过模块正确设置应用程序.

有一个名为CustomersService的服务,它通过Http检索客户数据.我创建了一个导入HttpModule并提供CustomersService的App Module.在另一个名为HomeModule的模块中,有一个使用该服务的组件.应用程序启动时,我在控制台上看到以下错误:

EXCEPTION: Error in ./HomeComponent class HomeComponent_Host - inline template:0:0
ORIGINAL EXCEPTION: No provider for Http!

我不知道为什么会这样……

任何建议将不胜感激.

谢谢.

这是文件:

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';

import { MdSidenavModule } from '@angular2-material/sidenav';
import { MdListModule } from '@angular2-material/list';
import { MdIconModule } from '@angular2-material/icon';
import { MdToolbarModule } from '@angular2-material/toolbar';
import { MdButtonModule } from '@angular2-material/button';

import { AppComponent } from './app.component';
import { routing } from './app.routing';
import { CustomersService } from './shared/rest_services/customers.service';

import { HomeModule } from './home/home.module';

@NgModule({
    declarations: [AppComponent],imports: [
        BrowserModule,HttpModule,// material design
        MdSidenavModule,MdListModule,MdIconModule,MdToolbarModule,MdButtonModule,routing,// SharedModule.foorRoot(),HomeModule
    ],providers: [
        CustomersService,Http
    ],bootstrap: [AppComponent]
})
export class AppModule {

}

app.component.ts

import { Component } from '@angular/core';
import { CustomersService } from './shared/rest_services/customers.service';

@Component({
  selector: 'app-root',templateUrl: 'app.component.html',styleUrls: ['app.component.scss']
})
export class AppComponent {
  views = [ {title: 'Home',icon: 'home',path: 'home' } ];

  constructor() {

  }
}

customers.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/Http';

@Injectable()
export class CustomersService {

  private static _base = 'http://...';

  constructor(private _http: Http) {

  }

  getAll() {
    return this._http.get(CustomersService._base + "/customers.json");
  }
}

home.module.ts

import { NgModule } from '@angular/core';

import { routing }       from './home.routing';
import { HomeComponent } from './home.component';

@NgModule({
    imports: [ routing ],declarations: [
        HomeComponent
    ],exports: [
        HomeComponent
    ]
})
export class HomeModule {

}

home.component.ts

import { Component,OnInit } from '@angular/core';
import { CustomersService } from '../shared/rest_services/customers.service';

@Component({
  selector: 'app-home',templateUrl: 'home.component.html',styleUrls: ['home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor(private _customers: CustomersService) {
    this._customers.getAll().subscribe((data) => {
      console.log(data);
    });
  }

  ngOnInit() {
  }

}
我认为您不需要在模块的providers属性中指定有关Http的内容.在import属性中包含HttpModule时完成此操作.
@NgModule({
    declarations: [AppComponent],providers: [
        CustomersService // <-----
    ],bootstrap: [AppComponent]
})
export class AppModule {

}

HttpModule配置HTTP的相关提供程序.见https://github.com/angular/angular/blob/master/modules/%40angular/http/http.ts#L354

否则,也许这是一个错字:

import { Http } from '@angular/Http';

代替

import { Http } from '@angular/http';

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读