2
私は公式のAngular 2ページで "Heroes"チュートリアルを行ってきました。ルーティングに着いたときには、いくつかのことは意味をなさないものでした。それはプロバイダに関するものです。角度2 - プロバイダは実際にどのように機能しますか？
この部分は次のように表されます。私の主なコンポーネントは次のようになります。
/* heroes.component */
import {Component} from 'angular2/core';
import {Hero} from './hero';
import {HeroDetailComponent} from './hero-detail.component';
import {HeroService} from './hero.service';
import {OnInit} from 'angular2/core';
@Component({
selector: 'my-heroes',
directives: [HeroDetailComponent],
template: `
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="#hero of heroes" [class.selected] = "hero === selectedHero" (click)="onSelect(hero)">
<span class="badge"> {{hero.id}} </span> {{hero.name}}
</li>
</ul>
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
`
})
export class HeroesComponent implements OnInit {
heroes: Hero[];
selectedHero: Hero;
ngOnInit() {
this.getHeroes();
}
constructor(private _heroService: HeroService) { }
getHeroes() {
this._heroService.getHeroes().then(heroes => this.heroes = heroes);
}
onSelect(hero: Hero) {
this.selectedHero = hero;
}
}
はOK、そう、私の質問：これが機能するためには、私は両方のファイルにimport {HeroService} from './hero.service';をインポートする必要が
/* app.components */
import {Component} from 'angular2/core';
import {HeroesComponent} from './heroes.component';
import {HeroService} from './hero.service';
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<my-heroes></my-heroes>
`
directives: [HeroesComponent],
providers: [HeroService]
})
export class AppComponent {
title = 'Tour of Heroes';
constructor(private _heroService: HeroService) {}
}
や英雄のコンポーネントは次のようになります。しかし、providers: [HeroService]は@Componentの一部分にすぎず、app.componentsの一部に過ぎません。私はこのコードをheroes.componentに書く必要はありません。 heroes.componentはどのプロバイダを選ぶべきでしょうか？それはapp.componentsから継承されていますか？もしそうなら、私はなぜこれを両方のファイルに書く必要がありましたか：import {HeroService} from './hero.service';？なぜapp.componentsに入っていないのですか？どちらのクラスも同じconstructorを持っています。私はここで何が起こっているのか分からないので、事前の説明に感謝します。