Провайдеры Массив в app.module.ts в Angular 2

Question

Это может быть просто тривиальный вопрос, но мне нужно прояснить сомнения.

Я следил за учебником https://angular.io/docs/ts/latest/tutorial/toh-pt5.html и вдруг это застряло.

В моих hero.component.js

Я имею

import { Component } from '@angular/core'; 
import { Hero } from './hero'; 
import { OnInit } from '@angular/core'; 

@Component({ 
    selector: 'my-heroes', 
    template:` 
      <h2>My Heroes</h2> 
      <ul class="heroes"> 
       <li *ngFor="let hero of heroes" [class.selected]="hero === hero" (click)="onSelect(hero)"> 
       <span class="badge">{{hero.id}}</span> {{hero.name}} 
       </li> 
      </ul> 
      <my-hero-detail [hero]="selectedHero"></my-hero-detail>`, 
    styles: [` 
    .selected { 
     background-color: #CFD8DC !important; 
     color: white; 
    } 
    .heroes { 
     margin: 0 0 2em 0; 
     list-style-type: none; 
     padding: 0; 
     width: 15em; 
    } 
    .heroes li { 
     cursor: pointer; 
     position: relative; 
     left: 0; 
     background-color: #EEE; 
     margin: .5em; 
     padding: .3em 0; 
     height: 1.6em; 
     border-radius: 4px; 
    } 
    .heroes li.selected:hover { 
     background-color: #BBD8DC !important; 
     color: white; 
    } 
    .heroes li:hover { 
     color: #607D8B; 
     background-color: #DDD; 
     left: .1em; 
    } 
    .heroes .text { 
     position: relative; 
     top: -3px; 
    } 
    .heroes .badge { 
     display: inline-block; 
     font-size: small; 
     color: white; 
     padding: 0.8em 0.7em 0 0.7em; 
     background-color: #607D8B; 
     line-height: 1em; 
     position: relative; 
     left: -1px; 
     top: -4px; 
     height: 1.8em; 
     margin-right: .8em; 
     border-radius: 4px 0 0 4px; 
    } 
    `] 

}) 

export class HeroComponent implements OnInit { 
    selectedHero:Hero ; 
    heroes:Hero[]; 

    constructor(private _heroService:HeroService){} 

    onSelect(hero:Hero): void{ 
    this.selectedHero = hero; 
    } 

    getHeroes():void { 
    this._heroService.getHeroes().then(myHeroes => this.heroes = myHeroes) ; 
    } 

    ngOnInit():void{ 
    this.getHeroes(); 
    } 

} 

Это ошибки, который выглядит как вызванное missed reference of ./hero.service

Но файл уже является частью app.module.ts Providers Array ,

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

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

@NgModule({ 
    imports:  [ 
        BrowserModule, 
        FormsModule 
       ], 
    declarations: [ 
        AppComponent, 
        HeroComponent, 
        HeroDetailComponent 
       ], 
    providers: [ 
        HeroService 
       ], 
    bootstrap: [ AppComponent] 
}) 
export class AppModule { } 

Тогда зачем нам нужно импортировать import { HeroService } from './hero.service'; снова в hero.componnet.ts файл , чтобы избавиться от rerrors?

Не @NgModule означает избавиться от повторяющихся импорта всех наших директив, компонентов, труб и т.д., как указывали на этот блог:

https://scotch.io/bar-talk/getting-to-know-angular-2s-module-ngmodule?

Answer 1

import { Component } from '@angular/core'; 
import { Hero } from './hero'; 
import { OnInit } from '@angular/core'; 

@Component({ 
    selector: 'my-heroes', 
    providers : [HeroService], 
    template:` 
      <h2>My Heroes</h2> 
      <ul class="heroes"> 
       <li *ngFor="let hero of heroes" [class.selected]="hero === hero" (click)="onSelect(hero)"> 
       <span class="badge">{{hero.id}}</span> {{hero.name}} 
       </li> 
      </ul> 
      <my-hero-detail [hero]="selectedHero"></my-hero-detail>`, 
    styles: [` 
    .selected { 
     background-color: #CFD8DC !important; 
     color: white; 
    } 
    .heroes { 
     margin: 0 0 2em 0; 
     list-style-type: none; 
     padding: 0; 
     width: 15em; 
    } 
    .heroes li { 
     cursor: pointer; 
     position: relative; 
     left: 0; 
     background-color: #EEE; 
     margin: .5em; 
     padding: .3em 0; 
     height: 1.6em; 
     border-radius: 4px; 
    } 
    .heroes li.selected:hover { 
     background-color: #BBD8DC !important; 
     color: white; 
    } 
    .heroes li:hover { 
     color: #607D8B; 
     background-color: #DDD; 
     left: .1em; 
    } 
    .heroes .text { 
     position: relative; 
     top: -3px; 
    } 
    .heroes .badge { 
     display: inline-block; 
     font-size: small; 
     color: white; 
     padding: 0.8em 0.7em 0 0.7em; 
     background-color: #607D8B; 
     line-height: 1em; 
     position: relative; 
     left: -1px; 
     top: -4px; 
     height: 1.8em; 
     margin-right: .8em; 
     border-radius: 4px 0 0 4px; 
    } 
    `] 

}) 

export class HeroComponent implements OnInit { 
    selectedHero:Hero ; 
    heroes:Hero[]; 

    constructor(private _heroService:HeroService){} 

    onSelect(hero:Hero): void{ 
    this.selectedHero = hero; 
    } 

    getHeroes():void { 
    this._heroService.getHeroes().then(myHeroes => this.heroes = myHeroes) ; 
    } 

    ngOnInit():void{ 
    this.getHeroes(); 
    } 

}