Я проходил учебник «Герои» на официальной странице «Угловая 2», и когда я пришел на маршрутизацию, несколько вещей не имели смысла. Речь идет о провайдерах.Угловая 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] является лишь частью @Componentapp.components. Мне не нужно писать этот фрагмент кода в heroes.component. Как heroes.component знает, какой поставщик выбрать? Наследуется ли она от app.components? И если да, то зачем мне писать это в обоих файлах: import {HeroService} from './hero.service';? Почему не только в app.components? Оба класса также имеют одинаковые constructor. Я не знаю, что здесь происходит, поэтому заранее спасибо за любое объяснение.