Quels sont les fournisseurs dans Angular2?

Question

Dans le Angular2 configuration des composants, providers est l'une des clés que l'on peut spécifier. Comment ces fournisseurs définis et quels sont-ils utilisés?

@Component({
  ..
  providers: [..],
  ..
})

Note:

Angular2 documentation gagne progressivement en maturité mais encore rares. Il définit actuellement les fournisseurs comme:

Un tableau de l'injection de dépendance des fournisseurs de services que l' composant requiert.

Cette définition récursive n'est pas très utile. Une explication plus détaillée avec un exemple serait très utile.

Answer 1

Les fournisseurs sont généralement singleton (une instance) des objets, que d'autres objets ont accès par le biais de l'injection de dépendance (DI).

Si vous prévoyez d'utiliser un objet à plusieurs reprises, par exemple Http de service dans les différents composants, vous pouvez demander de l'instance de service (réutiliser). Vous faites cela avec l'aide de DI en fournissant une référence au même objet que DI crée pour vous.

@Component){
  ..
  providers: [Http]
}

..au lieu de créer un nouvel objet à chaque fois:

@Component){}
class Cmp {
  constructor() {
    // this is pseudo code, doens't work
    this.http = new Http(...options);
  }
}

C'est une approximation, mais c'est l'idée générale derrière l'Injection de Dépendances - laissé le cadre de poignée de la création et de l'entretien des objets réutilisables... Fournisseur est Angulaire du terme pour ces objets réutilisables (dépendances).

Answer 2

Registre des injectables

Les fournisseurs de solutions injectables connu Angulaire de la DI et de définir la portée d'une injectable (service).

Hiérarchie des injecteurs

Angulaire DI crée un arbre d'injecteurs (parent > enfant > un petit-enfant >...) qui ressemble à la structure de vos éléments et des directives.

Seule instance par le fournisseur

Les fournisseurs sont gérés par l'injecteur. Chaque fournisseur propose une seule instance d'un produit injectable.

Fournisseur de recherche

Lorsqu'un composant ou directive dispose d'une dépendance (paramètre du constructeur), DI se lance à la recherche sur cette composante de l'injecteur pour les fournisseurs. Si elle en a un, il demande à l'instance de ce fournisseur et l'injecte.

Si l'injecteur n'ont pas de fournisseur de la clé demandée (type), alors le parent de l'injecteur est visité, jusqu'à la racine ("bootstrap") jusqu'à ce qu'un fournisseur est trouvé et son instance peut être injecté. (Si aucun fournisseur n'est trouvé DI renvoie une erreur).

Définir la portée d'une injectable exemple

De cette façon, vous pouvez définir l'étendue d'un service partagé, parce que DI se lance à la recherche de l'élément où une instance est demandé à la hausse jusqu'à en trouver un.

Singleton ou pas

Combien de places vous fournir un produit injectable détermine combien d'instances seront créées (ils ne sont instanciés si effectivement demandé).

Si vous voulez une instance unique pour l'ensemble de votre demande, puis de fournir un produit injectable seulement une fois à la racine du composant (ou avec bootstrap(AppComponent, [...]) ce qui entraîne le même comportement.

Si vous voulez une nouvelle instance pour chaque composant A, puis l'ajouter à des fournisseurs de la composante A.

(mise à jour) NgModule paresseux et non paresseux

Avec l'introduction de l' NgModule modules, des niveaux supplémentaires ont été introduites. Les fournisseurs inscrits auprès de non-chargement paresseux modules sont au-dessus du composant racine de la hiérarchie.

Chargement paresseux modules sont au-dessus des composants et des directives chargé par ces composants.

Parce que les fournisseurs sont en lecture seule après un injecteur est créé, il n'y a aucun moyen d'ajouter des fournisseurs de paresseux les modules chargés à la racine de l'injecteur. Donc, paresseux modules chargés d'obtenir leurs propres racines de la portée.

Voir aussi https://stackoverflow.com/a/45231440/217408

Answer 3

Pensez à des fournisseurs comme une recette de cuisine qui raconte angulaire comment injecter un service.

Nous constatons souvent des fournisseurs angulaire de cette façon:

providers: [AnyService]

C'est juste une courte distance de la main pour ce:

[new Provider(AnyService, {useClass: AnyService})]

Les deux approches sont en train de dire: Chaque fois que quelqu'un exige "AnyService", la "AnyService"

Voir que même si je suis en offrant la même classe dans l'exemple ci-dessus, dans un autre scénario que je pourrais faire quelque chose comme cela.

[new Provider(AnyService, {useClass: AnyServiceCustom})]

Mais dans les deux scénarios, constructeur restera le même:

constructor( private _anyService: AnyService) {
}

Pour mieux comprendre tout cela, vous devez comprendre comment l'injection de dépendance travaille dans Angulaire 2 en tant que fournisseurs sont directement liés.

C'est une lecture incontournable pour tous angulaire 2 développeur.

https://angular.io/docs/ts/latest/guide/dependency-injection.html?The%20Provider%20class%20and%20provide%20function#!#injector-providers

Answer 4

import { service_name} from '../path';

@Component({

  selector: 'selector_name',     
  templateUrl: './html file name ',
  styleUrls: ['./css file name '],
  providers: [ ./'service_name'];

})
export class AppComponent {

  constructor(private Service_name: service_name) { 
    //enter code here
}