Angular 2 提供程序在组件中不可访问

Question

我是 angular 2 的新手。我正在关注遗留的快速启动应用程序，英雄之旅。

我创建了应用程序中提到的服务。

我有一个服务 HeroService。用于拉取所有英雄数据。

我已将 HeroService 作为提供者包含在 app.module 文件中，以便能够在整个应用程序中为所有应用程序访问它。

我的app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { AppComponent }  from './app.component';
import { HeroDetailComponent }  from './hero-detail.component';
import { HeroesComponent }  from './heroes.component';
import { HeroService }  from './hero.service';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      {
        path: 'heroes',
        component: HeroesComponent
      }
    ])
  ],
  declarations: [ AppComponent, HeroesComponent, HeroDetailComponent ],
  providers: [ HeroService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

我想要访问 HeroService 以获取数据的组件文件是：

export class HeroesComponent implements OnInit {
    constructor(private heroService: HeroService) { }
}

问题是我在构建项目时遇到这样的错误:

Cannot find name 'HeroService'.

我已正确执行所有步骤。如果我在我的 HeroesComponent 中导入 HeroService，它似乎可以工作。但未导入时失败。我错过了一些步骤吗？据我了解，在 app.module 上声明提供程序将注册它以在整个 application/components 期间使用，而无需每次都导入它。

如有错误请指正

Answer 1

你还需要在组件内部导入

import { HeroService }  from './hero.service';

Angular 2 提供程序在组件中不可访问

Angular 2 provider is not accessible in components

javascript

angular2-services

angular