injection de dépendance angulaire 6

Question

Dans la dernière version Angulaire 6, un service est inscrit dans un module à l'aide de l' providedIn propriété dans le service de métadonnées:

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

Toutefois, la documentation reste également fait référence à l'inscription au service dans le module providers tableau dans le module de métadonnées comme nous l'avons fait dans Angulaire 5:

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

Donc,

• La méthode qui devrait être utilisée pour faire de l'injecteur de la connaissance du service qu'il doit injecter?
• Va le module providers tableau de la méthode obsolète?

Answer 1

Fondamentalement, vous pouvez utiliser, Mais aussi par de nouveaux CLI provideIn seront automatiquement ajoutés lors de la création service

providedIn

Il y a maintenant un nouveau recommandé, de manière à enregistrer un fournisseur, directement à l'intérieur de l' @Injectable() décorateur, à l'aide de la nouvelle providedIn attribut. Il accepte 'root' sous forme de valeur ou de n'importe quel 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 à la les fournisseurs de la racine du module. De même, si vous utilisez providedIn: UsersModule, l'injectable est enregistré en tant que fournisseur de l' UsersModule sans ajouter il pour les fournisseurs de module.

Cette nouvelle méthode a été introduite pour avoir une meilleure arbre qui tremble dans la application. Actuellement, un service pour les fournisseurs d'un module finira dans le dernier bundle, même si elle n'est pas utilisée dans le l'application, qui est un peu triste.

Pour plus d'informations, veuillez consulter ici

• https://blog.ninja-squad.com/2018/05/04/what-is-new-angular-6/
• https://angular.io/guide/dependency-injection#injectable-ngmodule-or-component

Answer 2

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 de disposer d'un service toujours être fournies en la racine de l'application de l'injecteur. Peut-être que les utilisateurs doivent explicitement opt-in pour utiliser le service ou le service doit être fourni dans un paresseusement-chargé contexte. Dans ce cas, le fournisseur doit être associé avec un @NgModule class, et seront utilisés par celle-ci l'injecteur comprend ce module.

Donc, fondamentalement, vous utiliserez providedIn: 'root' pour les services qui sont d'application large. Pour les autres services de continuer à utiliser l'ancienne version.

N'oubliez pas que sur vous déjà eu le choix de fournir des services de manière différente. Par exemple, il est aussi possible de déclarer Injectables au niveau des composants (ce qui ne change pas en V6).

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

De cette façon, le service devient disponible seulement en MyComponent et de ses sous-composants de l'arbre.

Answer 3

Si vous utilisez un développeur angulaire 5+, il créera automatiquement le service injectable lorsqu'il sera déclaré comme 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.

Answer 4

L' @NgModule() et @Component() décorateurs ont les fournisseurs de métadonnées option, où vous pouvez configurer les fournisseurs pour NgModule niveau ou d'un composant au niveau des injecteurs.

Le @Injectable() décorateur a la providedIn option de métadonnées, où vous pouvez spécifier le fournisseur de l'décoré de la classe du service à la racine de l'injecteur, ou avec l'injecteur pour un NgModule.

Dans votre cas, parce qu'il a été providedIn à la "racine" de niveau, sans avoir besoin de l'ajouter de nouveau en tant que fournisseur dans le module.

Plus sur l'Injection de Dépendance Ici