Alors que la plupart d’entre vous connaissent probablement la façon de base de configurer un fournisseur en le déclarant simplement :

providers: 

L’injection de dépendance angulaire fournit des capacités plus avancées.

Avec le fournisseur d’usine, vous pouvez configurer le Injector pour renvoyer une valeur en appelant une fonction spécifique. Regardons cet exemple.

providers: };

La propriété provide configure le jeton qui sera utilisé dans l’injection de dépendance et la fonction useFactory pointe vers la fonction qui sera utilisée pour renvoyer la valeur souhaitée. La propriété deps configure les jetons qui seront transmis à votre fonction d’usine.

Quand l’utiliser?

Le fournisseur d’usine peut être très pratique lorsque vous devez créer dynamiquement une valeur dépendante, en fonction des informations que vous n’aurez pas avant l’exécution. Vous pouvez prendre une décision éclairée sur la valeur à renvoyer en fonction des autres services et de l’état de l’application.

Exemple:

Essayons de deviner à partir de quel appareil mobile un utilisateur est connecté. Nous allons essayer d’utiliser des informations telles que l’agent utilisateur du navigateur, la largeur de l’écran et la hauteur de l’écran. Définissons trois jetons qui seront utilisés plus tard pour identifier le nom du périphérique.

La classe InjectionToken Crée un jeton qui peut être utilisé dans l’injection de dépendance angulaire. InjectionToken est paramétré sur T qui est le type d’objet qui sera retourné par le Injector. Cela fournit un niveau supplémentaire de sécurité de type.

providers: providers: providers: 

Maintenant, nous pouvons trouver un algorithme pour détecter le nom du périphérique en fonction des trois jetons que nous avons définis ci-dessus. Nous passons une fonction de flèche à useFactory qui a 3 dépendances, afin de résoudre ces dépendances, nous passons dans un tableau de dépendances (dep) avec les jetons répertoriés.

providers: 

Enfin, nous consommerons le nom du périphérique dans notre composant Angulaire.

@Component({ selector: 'my-device-name')
export class DeviceName {
constructor(@Inject('DeviceName') private deviceName: string) {}}

Le décorateur de paramètre Inject indique à Angular DI que ce paramètre (deviceName) doit être résolu à partir d’un jeton —DeviceName défini.

C’est tout!

Suivez-moi sur Twitter #LanoTechno

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.