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

Question

I am new on angular 2. I was following the legacy quick-start application, Tour of Heroes.

I created services as mentioned in the application.

I have a service HeroService. Which is used to pull all the heroes data.

I have included the HeroService at the app.module file as provider to be able to access it through out the application for all application.

My 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 { }

And my Component File where I want to Access the HeroService to get data is:

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

The problem is I am getting an error like this, when i build the project :

Cannot find name 'HeroService'.

I have followed all the steps correctly. If I import the HeroService in my HeroesComponent, it seems to work. But fails when not imported. Am I missing some step. As far as I understood declaring the provider on app.module will register it to use throughout the application/components without need of importing it each time.

Please correct me If I am wrong somewhere.

Answer 1

您还需要在组件内部导入

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