javascript - 组件中无法访问 Angular 2 提供程序

Question

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

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

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

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

我的 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 上声明提供者将注册它以在整个应用程序/组件中使用，而无需每次都导入它。

如果我哪里不对，请指正。

Answer 1

你还需要在组件内部导入

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