2
我已經在官方Angular 2頁面上看過「英雄」教程，當我走到路由時，有幾件事情沒有意義。這是關於提供者。Angular 2 - 供應商如何實際工作？
有問題的部分表示如下。我的主要成分是這樣的：
/* 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) {}
}
和英雄的組件看起來是這樣的：
/* 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'; 。但是，providers: [HeroService]僅是app.components的@Component的一部分。我不需要在heroes.component中寫這段代碼。 heroes.component如何知道選擇哪個供應商？它是從app.components繼承嗎？如果是這樣，爲什麼我必須在這兩個文件中寫這個：import {HeroService} from './hero.service';？爲什麼不只是在app.components？這兩個類也有相同的constructor。我不知道這裏發生了什麼事情，所以先謝謝任何解釋。