web-dev-qa-db-fra.com

injection angulaire 6 dépendance

Dans la dernière version de Angular 6, un service est enregistré dans un module à l'aide de la propriété providedIn dans les métadonnées du service:

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

Cependant, la documentation fait également référence à l'enregistrement du service dans le tableau du module providers dans les métadonnées du module, comme nous l'avons fait dans Angular 5:

@NgModule({
  providers: [HeroService],
})
export class AppModule {}

alors, quelle méthode doit être utilisée pour informer l'injecteur du service qu'il doit injecter et la méthode de la matrice du fournisseur de module sera-t-elle obsolète?

javascriptangulartypescriptangular-cliangular6
47
Hamed Baatour

Fondamentalement, vous pouvez utiliser l’un ou l’autre, mais comme le nouveau CLI, provideIn sera automatiquement ajouté lors de la création de service.

fourni dans

Il existe maintenant une nouvelle méthode recommandée pour enregistrer directement un fournisseur à l’intérieur du décorateur @Injectable(), à l’aide du nouveau fourniIn attribut. Il accepte 'root' en tant que valeur ou tout module de votre application. Lorsque vous utilisez 'root', votre solution injectable sera enregistrée en tant que singleton dans l’application, et vous n’aurez pas besoin de l’ajouter au fournisseurs du module racine. De même, si vous utilisez providedIn: UsersModule, l'injectable est enregistré en tant que fournisseur du UsersModule sans l'ajouter aux fournisseurs du module.

Cette nouvelle méthode a été introduite pour avoir un meilleur ébranlement dans le fichier application. Actuellement un service ajouté aux fournisseurs d'un module finira dans le dernier paquet, même s’il n’est pas utilisé dans le fichier application, ce qui est un peu triste.

Pour plus d'informations s'il vous plaît se référer ici

59
Pardeep Jain

Comme toujours lorsque plusieurs solutions sont disponibles, cela dépend de ce que vous voulez atteindre. Mais la documentation vous donne une directive à choisir.

Parfois, il n'est pas souhaitable qu'un service soit toujours fourni dans l'injecteur racine de l'application. Peut-être que les utilisateurs devraient explicitement opter pour à utiliser le service, ou le service devrait être fourni dans un contexte paresseusement chargé. Dans ce cas, le fournisseur doit être associé avec un @NgModule class spécifique, et sera utilisé par l'injecteur comprend ce module.

Donc, fondamentalement, vous utiliserez providedIn: 'root' pour tous les services qui concernent l’ensemble de l’application. Pour les autres services, continuez à utiliser l'ancienne version.

N'oubliez pas que vous avez déjà eu le choix de fournir un service différent. Par exemple, il est également possible de déclarer Injectable au niveau composant (cela ne change pas dans la V6).

  @Component({
    selector: 'app-my-component',
    templateUrl: './my.component.html',
    providers: [ MyService ]
  })

Ainsi, le service devient disponible uniquement dans MyComponent et son arborescence de sous-composants.

9
JEY

Si vous utilisez angular 5+ developer, il créera automatiquement le service injectable lorsqu'il sera déclaré comme étant fourniIn: 'root'. Dans ce cas, vous ne serez pas obligé d'importer le service dans app.module.ts. Vous pouvez directement l'utiliser dans un autre composant.

1
Prashant

Les décorateurs @NgModule() et @Component() disposent de l'option de métadonnées fournisseurs, dans laquelle vous pouvez configurer des fournisseurs pour les injecteurs de niveau NgModule ou de composant.

Le décorateur @Injectable () possède l'option de métadonnéesInfin, dans laquelle vous pouvez spécifier le fournisseur de la classe de service décorée avec l'injecteur racine ou avec l'injecteur d'un module spécifique.

Dans votre cas, puisqu'il a été fourni au niveau "racine", il n'est pas nécessaire de l'ajouter à nouveau en tant que fournisseur dans le module.

En savoir plus sur Injection de dépendance ici

0
CharithJ