プロバイダapp.module.tsのアングル2の配列

Question

これはちょっとした問題かもしれませんが、疑問を明確にする必要があります。

私はチュートリアルhttps://angular.io/docs/ts/latest/tutorial/toh-pt5.htmlに従っていて、突然それが私を抱きしめました。私はこれはmissed reference of ./hero.service

によって引き起こされるように見えるエラーを持っていますが、ファイルが既にapp.module.ts Providers Arrayの一部である

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(); 
    } 

} 

持っ

私hero.component.jsで

。

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

は、なぜ我々はrerrorsを取り除くためにhero.componnet.tsファイルで再びimport { HeroService } from './hero.service';をインポートする必要がありますか？

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

は、このブログで指摘したようにすべての私たちのディレクティブ、部品、パイプなどの繰り返しの輸入を取り除くためのもの@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(); 
    } 

}