web-dev-qa-db-fra.com

Quel est le but de fournisIn avec le décorateur injectable lors de la génération de services dans Angular 6?

Lors de la génération de services dans la CLI Angular, elle ajoute des métadonnées supplémentaires avec une propriété "fourni dans" avec la valeur par défaut de "racine" pour le décorateur Injectable.

@Injectable({
  providedIn: 'root',
})

Qu'est-ce que fourni exactement? Je suppose que cela rend le service disponible sous la forme d'un service singleton de type "global" pour l'ensemble de l'application, mais ne serait-il pas plus propre de déclarer de tels services dans le tableau de fournisseurs de l'AppModule?

UPDATE:

Pour quiconque, le paragraphe suivant fournissait une autre bonne explication également, en particulier si vous souhaitez fournir votre service à un module de fonctionnalité uniquement.

Il existe maintenant une nouvelle méthode recommandée pour enregistrer un fournisseur directement à l'intérieur du décorateur @Injectable(), à l'aide du nouvel attribut providedIn. Il accepte 'root' en tant que valeur ou tout module de votre application. Lorsque vous utilisez 'root', votre injectable sera enregistré en tant que singleton dans l'application, et vous n'avez pas besoin de l'ajouter aux fournisseurs du module racine. De même, si vous utilisez providedIn: UsersModule, la injectable est enregistrée en tant que fournisseur de la UsersModule sans l'ajouter à la providers du module. "- https : //blog.ninja-squad.com/2018/05/04/what-is-new-angular-6/

UPDATE 2:

Après des recherches plus poussées, j’ai décidé qu’il était seulement utile d’avoir providedIn: 'root'

Si vous voulez provide un service dans un module autre que le module racine, il vaut mieux utiliser le tableau providers dans les décorateurs du module de fonction, sinon vous aurez des dépendances circulaires. Discussions intéressantes à avoir ici - https://github.com/angular/angular-cli/issues/1017

angularangular6
62
Stefan Zvonar

si vous utilisez Fourni, l'injectable est enregistré en tant que fournisseur du module sans l'ajouter aux fournisseurs du module.

De Docs

Le service lui-même est une classe générée par la CLI et décorée avec @Injectable. Par défaut, ce décorateur est configuré avec une propriété provisionIn, qui crée un fournisseur pour le service. Dans ce cas ,InfIn: 'racine' spécifie que le service doit être fourni dans l'injecteur de racine.

28
Sajeetharan - MSFT

providedIn: 'root' est le moyen le plus simple et le plus efficace de fournir des services depuis Angular 6:

  1. Le service sera disponible au niveau de l'application en tant que singleton sans qu'il soit nécessaire de l'ajouter au tableau de fournisseurs d'un module (comme Angular <= 5).
  2. Si le service est uniquement utilisé dans un module chargé paresseux, il sera chargé avec ce module.
  3. S'il n'est jamais utilisé, il ne sera pas contenu dans la construction (arbre secoué).

Pour plus d'informations, lisez les documentation et FAQ de NgModule

Btw:

  1. Si vous ne voulez pas d'un singleton d'application, utilisez plutôt le tableau du fournisseur du fournisseur.
  2. Si vous souhaitez limiter l'étendue afin qu'aucun autre développeur n'utilise votre service en dehors d'un module particulier, utilisez plutôt la matrice de fournisseurs NgModule du fournisseur.
16
Mick

fourniIn indique à Angular que l'injecteur racine est responsable de la création d'une instance de votre service. Les services fournis de cette manière sont automatiquement mis à la disposition de toute l'application et ne doivent être répertoriés dans aucun module.

Les classes de service peuvent agir en tant que leurs propres fournisseurs, c'est pourquoi la définition de celles-ci dans le décorateur @Injectable correspond à tout l'enregistrement nécessaire.

4
Jawad Farooqi

à partir de la documentation

Qu'est-ce qu'un décorateur injectable?

Marque une classe comme étant disponible pour Injector pour la création.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class UserService {
}

Le service lui-même est une classe générée par la CLI et décorée avec @Injectable ().

Qu'est-ce que fourni exactement?

Détermine quels injecteurs fourniront l'injectable, en l'associant à un @NgModule ou à un autre InjectorType, ou en spécifiant que cet injectable doit être fourni dans l'injecteur 'racine', qui sera l'injecteur au niveau de l'application dans la plupart des applications.

providedIn: Type<any> | 'root' | null

fourniDans: 'root'

Lorsque vous fournissez le service au niveau racine, Angular crée une seule instance de service partagée et l'injecte dans toute classe qui le demande. L'enregistrement du fournisseur dans les métadonnées @Injectable () permet également à Angular d'optimiser une application en supprimant le service de l'application compilée s'il n'est pas utilisé.

fourni dans: Module

Il est également possible de spécifier qu'un service doit être fourni dans un @NgModule particulier. Par exemple, si vous ne souhaitez pas qu'un service soit disponible pour les applications, à moins qu'elles importent un module que vous avez créé, vous pouvez spécifier que le service doit être fourni dans le module.

import { Injectable } from '@angular/core';
import { UserModule } from './user.module';

@Injectable({
  providedIn: UserModule,
})
export class UserService {
}

Cette méthode est préférée car elle permet de secouer le service si rien ne l’injecte.

S'il n'est pas possible de spécifier dans le service quel module doit le fournir, vous pouvez également déclarer un fournisseur pour le service dans le module:

import { NgModule } from '@angular/core';
import { UserService } from './user.service';

@NgModule({
  providers: [UserService],
})
export class UserModule {
}
2
Nipuna

Selon le Documentation :

L'enregistrement du fournisseur dans les métadonnées @Injectable () permet également à Angular d'optimiser une application en supprimant le service de l'application compilée s'il n'est pas utilisé.

2
Maarti