heroes.component.ts
hero-list.component.ts
hero.ts
mock-heroes.ts
HeroesComponent
est la composante des héros de haut niveau.
Son seul but est d'afficher HeroListComponent
, ce qui affiche une liste de noms de héros.HeroListComponent
obtient les héros du tableau HEROES
,
une collection en mémoire définie dans un fichier mock-heroes
séparé.null
au moment de l'exécution.HeroService
dans le src/app/heroes
dossier avec cette commande.
HeroService
suivant.
@Injectable()
est un ingrédient essentiel dans chaque définition de service Angular.
Le reste de la classe a été écrit pour exposer une méthode qui renvoie les mêmes données fictives qu'auparavant.
Une application réelle obtiendrait probablement ses données de manière asynchrone à partir d'un serveur distant,
mais nous l'ignorerons pour nous concentrer sur les mécanismes d'injection du service.
@Injectable()
le marque comme un service pouvant être injecté, mais Angular ne peut l'injecter nulle part tant que vous
n'avez pas configuré un injecteur de dépendance Angular avec un fournisseur de ce service.HeroListComponent
.
Vous créez rarement un injecteur Angular vous-même. Angular crée des injecteurs pour vous lors de l'exécution de l'application,
en commençant par l'injecteur racine créé lors du processus d'amorçage.@Injectable()
pour le service lui-même.@NgModule()
pour un NgModule
.@Component()
pour un composant.@Injectable()
a l'option de métadonnées providedIn, dans laquelle vous pouvez spécifier le fournisseur de la classe de service
décorée avec l'injecteur root ou avec l'injecteur pour un NgModule
spécifique.@NgModule()
et @Component()
ont l'option de métadonnées providers,
dans laquelle vous pouvez configurer des fournisseurs pour les injecteurs de niveau NgModule
ou de composant.@Directive()
.
Vous pouvez également configurer des fournisseurs pour les directives et les tubes au même niveau que le composant.HeroListComponent
des héros de HeroService
, il doit demander à HeroService
d'être injecté,
plutôt que de créer sa propre instance de HeroService
avec la commande new
.HeroListComponent
qui demande l'injection de HeroService
.HeroListComponent
devrait faire quelque chose avec l'injecté HeroService
.
Voici le composant révisé, qui utilise le service injecté, côte à côte avec la version précédente à des fins de comparaison.hero-list.component (avec DI)
hero-list.component (sans DI)
HeroService
doit être fourni dans un injecteur parent.
Le code dans le Component HeroList
ne dépend pas d'où vient HeroService
.
Si vous avez décidé de fournir dans HeroService
AppModule
, HeroListComponent
ne changerait pas.UserService
au niveau root
ou AppModule
signifie qu'il est enregistré avec l'injecteur de racine.
Il n'y a qu'une seule instance UserService
dans l'application entière et chaque classe injectée UserService
obtient cette instance de service,
sauf si vous configurez un autre fournisseur avec un injecteur enfant.NgModule
est chargé paresseux au moment de l'exécution,
Angular peut créer un injecteur avec ses propres fournisseurs @Component()
NgModule
ou de composant, il détruit également cet injecteur et ses instances de service.HeroListComponent
à la fois le HeroService
fourni HeroComponent
et le UserService
fourni AppModule.HeroList
avec un service fictif que vous pouvez manipuler lors du test.HeroService
est très simple et n'a pas de dépendances propres.
Supposons toutefois que vous souhaitiez qu'il signale ses activités via un service de journalisation.
Vous pouvez appliquer le même schéma d'injection de constructeur en ajoutant un constructeur prenant un paramètre Logger
.HeroService
qui injecte Logger
,
côte à côte avec le service précédent, à des fins de comparaison.src/app/heroes/hero.service (v2)
src/app/heroes/hero.service (v1)
src/app/logger.service
Logger
et la stocke dans un champ privé appelé logger
.
La méthode getHeroes()
enregistre un message lorsqu'il est demandé de récupérer des héros.Logger
a également le décorateur @Injectable()
,
même s'il n'a peut-être pas besoin de ses propres dépendances. En fait, le décorateur @Injectable()
est requis pour tous les services.@Injectable()
est le décorateur standard pour les classes de service.HeroService
directement de l'injecteur en fournissant le type HeroService
en tant que jeton:HeroService
de classe, Angular sait comment injecter le
service associé à ce jeton HeroService
de classe :HeroService
nécessite un enregistreur, mais si cela pouvait se passer sans un ?@Optional()
.
@Optional()
, votre code doit être préparé pour une valeur null
.
Si vous n'enregistrez aucun fournisseur de journalisation, l'injecteur définit la valeur du logger sur null
.
@Inject()
et @Optional()
sont des décorateurs de paramètres.
Ils modifient la manière dont l'infrastructure DI fournit une dépendance, en annotant le paramètre de dépendance sur le constructeur de la
classe qui nécessite la dépendance.