Composants et fournisseurs angulaires: classes, usines et valeurs

Points de base

Les composants
• Angular 2 sont capables d'utiliser des fournisseurs, qui sont un ensemble d'objets injectables que les composants peuvent utiliser. Les prestataires sont à la base des systèmes Angular 2 Injection de dépendance (DI).
• Les fournisseurs peuvent être divisés en trois types: fournisseur de classes, fournisseur d'usine et fournisseur de valeur. Le fournisseur de classe génère une instance de la classe, le fournisseur d'usine génère la valeur de retour de la fonction spécifiée et le fournisseur de valeur renvoie directement sa valeur.
• Le système DI d'Angular 2 permet d'enregistrer des classes, des fonctions ou des valeurs (appelées fournisseurs), de résoudre les dépendances entre les fournisseurs, de faire fonctionner les résultats du fournisseur en code et de maintenir la hiérarchie de l'injecteur.
• L'injecteur d'Angular crée une instance du fournisseur de classe une seule fois et le met en cache. Cette fonctionnalité vous donne la flexibilité de contrôler les résultats générés par un seul fournisseur et si nous utilisons une seule instance ou plusieurs instances.
• Angular 2 permet l'enregistrement d'un fournisseur en utilisant une clé associée au fournisseur réel (appelé "jetons"). Cette fonctionnalité est utile pour les tests unitaires, où une classe simulée qui ne fait pas d'appels de serveur peut être remplacée sans modifier le code des composants.

L'article précédent a discuté de la façon d'utiliser des annotations @Input et @Output pour transmettre des données dans et hors des composants. Cet article introduira un autre aspect de base des composants Angular 2 - leur capacité à utiliser fournisseurs .

Vous avez peut-être vu des "fournisseurs" dans la liste des propriétés de configuration des composants, et vous pouvez vous rendre compte qu'ils vous permettent de définir un ensemble d'objets injectables qui peuvent être utilisés pour un composant. C'est bien, mais bien sûr, cela soulève la question: "Qu'est-ce qu'un fournisseur?"

Répondre Cette question nécessite une discussion approfondie du système d'injection de dépendance d'Angular 2 (DI). Nous pouvons spécifiquement couvrir DI dans les futurs articles de blog, mais une série d'articles de Pascal Precht le présentent très bien, à partir d'ici: https://www.php.cn/link/f7f3bfce09a3008d185e1775549ec2d2 di et angulaire 2 2 DI Systèmes (comme décrit dans l'article de Pascal), mais en bref, le système DI est responsable de:

• Enregistrez une classe, une fonction ou une valeur. Dans le contexte de l'injection de dépendance, ces éléments sont appelés «fournisseurs» car ils produisent des résultats. Par exemple, des classes sont utilisées pour fournir ou générer des instances. (Voir ci-dessous pour plus de détails sur les types de fournisseurs.)
• Résoudre les dépendances entre les fournisseurs - par exemple, si un fournisseur en a besoin d'un autre.
• Lorsque nous demandons les résultats du fournisseur, faites fonctionner les résultats du fournisseur dans le code. Ce processus (mettant le résultat du fournisseur à la disposition du bloc de code) est appelé "l'injection de l'injection". Le code qui injecte les résultats du fournisseur est logiquement appelé "injecteur".
• Maintenez la hiérarchie de l'injecteur de sorte que si le composant demande les résultats du fournisseur du fournisseur indisponible dans son injecteur, DI recherchera la hiérarchie de l'injecteur.

Dans les articles précédents, nous avons inclus un graphique montrant des composants formant une hiérarchie qui commence par le composant racine. Complétons ce graphique pour contenir l'injecteur et ses ressources enregistrées (fournisseur):

Figure 1: Chaque composant a son propre injecteur pour enregistrer un fournisseur. L'injecteur crée un sous-injecteur, les demandes au fournisseur commencent par l'injecteur local et recherche la hiérarchie de l'injecteur.

d'en haut, nous pouvons voir que bien que les composants forment un graphique directionnel vers le bas, leurs injecteurs associés ont une relation bidirectionnelle: l'injecteur parent crée un injecteur d'enfant (vers le bas), lors de la demande du fournisseur, si le composant est le fournisseur demandé ne peut pas être trouvé dans son propre injecteur, Angular 2 recherchera l'injecteur parent (UP). Cela signifie que les fournisseurs avec le même identifiant au niveau inférieur couvriront (masquer) les fournisseurs avec le même nom au niveau supérieur.

Qu'est-ce qu'un fournisseur?

Alors, quels sont ces "fournisseurs" enregistrés par l'injecteur à chaque niveau? C'est en fait très simple: le fournisseur est angulaire pour fournir (générer, générer) la ressource ou la "chose" javascript que nous voulons utiliser:

• Le fournisseur de classe génère / fournit des instances de la classe.
• Le fournisseur d'usine génère / fournit le contenu renvoyé lors de l'exécution de la fonction spécifiée.
• Le fournisseur de valeur n'a pas besoin de prendre des mesures comme les deux précédents pour fournir le résultat, il ne renvoie que sa valeur.

Malheureusement, le terme "fournisseur" fait parfois référence à la fois à une classe, une fonction ou une valeur, et aussi à quelque chose généré par le fournisseur - une instance de classe, une valeur de retour ou une valeur de retour d'une fonction.

Voyons comment nous pouvons ajouter des fournisseurs aux composants en créant des fournisseurs de classe en utilisant MyClass (une classe simple qui générera les instances que nous voulons utiliser dans notre application).

Figure 2: Classe simple avec quatre attributs. (Capture d'écran du code du code Visual Studio)

D'accord, c'est la classe. Maintenant, demandons à Angular d'enregistrer le fournisseur de classe en utilisant afin que nous puissions demander au système d'injection de dépendance de fournir une instance à utiliser dans notre code. Nous créerons un composant ProvDemo_01.ts qui sera utilisé comme composant racine de l'application. Nous chargeons ce composant dans bootstrap.ts et commençons notre application:

Figure 3: Démarrez le fichier bootstrap.ts de l'application, qui instancie le composant racine.

Si ce qui précède n'a pas de sens, consultez notre article précédent, qui couvre le processus de création d'une application Angular 2 simple. Notre composant racine est appelé ProvDemo, et le référentiel contient plusieurs versions différentes du composant. Vous pouvez modifier la version affichée en mettant à jour la ligne importée de ProvDemo ci-dessus. La première version de notre composant racine ressemble à ceci:

Figure 4: Importer MyClass S CompDemo, ajoutez-le au tableau providers et utilisez-le comme type dans le paramètre du constructeur.

Ajouter MyClass à ce composant est simple à fournir:

• import MyClass
• Ajoutez-le à la propriété de @Component S providers de
• Ajoutez un paramètre de type "MyClass" au constructeur

Dans les coulisses, lorsque Angular instancie un composant, le système DI crée un injecteur pour le composant qui enregistre le fournisseur MyClass. Angular voit ensuite le type MyClass spécifié dans la liste des paramètres du constructeur et recherche le fournisseur MyClass nouvellement enregistré et l'utilise pour générer une instance, qui est ensuite attribuée à "myClass" (minuscule initial "M").

Le processus de recherche du fournisseur MyClass et de génération de l'instance à affecter à "myClass" sont tous deux réalisés par Angular. Il utilise la syntaxe TypeScript pour comprendre le type à rechercher, mais l'injecteur d'Angular est responsable de la recherche et du retour des instances MyClass.

En vue de ce qui précède, vous pouvez conclure qu'Angular prend une liste de classes dans le tableau "providers" et crée un registre simple pour récupérer la classe. Cependant, pour une flexibilité accrue, il y a un ajustement subtil. L'une des principales raisons de la nécessité d'être «réglées» est de nous aider à rédiger des tests unitaires de composants qui ont des fournisseurs que nous ne voulons pas utiliser dans l'environnement de test. Il n'y a pas de nombreuses raisons de ne pas utiliser de vraies choses pour MyClass, mais si MyClass appelle le serveur pour récupérer des données, nous ne voulons peut-être pas ou ne pouvons pas le faire dans un environnement de test. Pour résoudre ce problème, nous devons être en mesure de remplacer la simulation dans ProvDemo qui ne fait pas d'appels de serveur. MyClass

Comment pouvons-nous faire le remplacement? Avons-nous besoin de parcourir tout le code et de modifier chaque

référence à MyClass? Ce n'est pas efficace et c'est un mauvais modèle pour les tests d'écriture. MyClassMock

Nous devons remplacer l'implémentation du fournisseur sans modifier le code composant

. Pour y parvenir, lorsque Angular enregistre un fournisseur, il met en place une carte pour associer une clé (appelée "jeton") au fournisseur réel. Dans l'exemple ci-dessus, le jeton et le fournisseur sont la même chose: ProvDemo. L'attribut MyClass ajouté au MyClass décorateur est abrégé pour: @Component providers

Cela signifie "utiliser

<code>providers: [ provide(MyClass, {useClass: MyClass} ]</code>

comme jeton (clé) pour trouver le fournisseur et définir le fournisseur sur

de sorte que lorsque nous demandons le fournisseur, le système d'injection de dépendance renvoie l'instance MyClass". La plupart d'entre nous sont habitués à traiter les clés comme des nombres ou des chaînes. Mais dans ce cas, le jeton (clé) est la classe elle-même. Nous pouvons également utiliser des chaînes comme jetons pour enregistrer les fournisseurs comme suit: MyClass MyClass

Alors, comment cela nous aide-t-il à effectuer le test? Cela signifie que dans un environnement de test, nous pouvons remplacer l'enregistrement du fournisseur et effectuer efficacement les éléments suivants:

<code>providers: [ provide("aStringNameForMyClass", {useClass: MyClass} ]</code>

Cela associera le jeton (clé)

<code>provide(MyClass, {useClass: MyClassMock})
</code>

au fournisseur de classe

. Lorsque notre code nécessite que le système DI injecte MyClass dans le test, nous obtenons une instance de MyClassMock qui peut forger des appels de données. L'effet final est que tout le code reste le même et nous n'avons pas à nous soucier de savoir si le test unitaire appellera un serveur qui peut ne pas exister dans l'environnement de test. MyClass MyClassMock Injecter le fournisseur non de classe

ci-dessus, nous injectons l'instance de fournisseur de classe dans le constructeur en écrivant le code suivant:

TypeScript nous permet de spécifier que le paramètre

<code>constructor( myClass: MyClass ) {...}
</code>

doit être du type

, et le système DI fera le travail et nous fournira des instances myClass. MyClass

Mais si nous utilisons des jetons de chaîne au lieu des classes, comment pouvons-nous dire à Angular d'injecter les résultats de nos fournisseurs? Montons le fichier bootstrap.ts pour ajouter un nouveau fournisseur de valeur et l'enregistrer avec un jeton de chaîne. N'oubliez pas qu'un fournisseur de valeur est un type de fournisseur qui renvoie la valeur associée au jeton. Dans l'exemple ci-dessus, nous disons à Angular d'enregistrer les fournisseurs en les ajoutant à l'attribut @Component de providers, mais nous pouvons également enregistrer les fournisseurs en les transmettant dans la fonction bootstrap (le même contenu peut être ajouté au providers Attributs):

Figure 5: Ajout bootstrap.ts du fournisseur de valeur.

Ici, nous ajoutons le fournisseur en appelant la fonction provide et en passant dans un jeton de chaîne ("SECURITY_KEY") et un objet qui spécifie que nous voulons créer un fournisseur de valeur et le fournisseur lui-même —— cas, c'est une valeur simple. Maintenant, nous voulons injecter la valeur générée par le fournisseur de valeur dans notre constructeur, mais cela ne fonctionne pas ...

<code>providers: [ provide(MyClass, {useClass: MyClass} ]</code>

C'est parce que "SECURITY_KEY" n'est pas un type. Pour permettre d'injecter des fournisseurs de jetons non de classe, Angular nous fournit un décorateur de paramètres @Inject. Comme tous les autres décorateurs, nous devons l'importer, puis nous l'utilisons pour dire à Angular d'injecter le fournisseur associé à notre jeton de chaîne. Pour ce faire, nous ajustons create ProvDemo_02.ts:

Figure 6: Importez le décorateur "Inject" et utilisez-le pour injecter le fournisseur de valeur identifié avec le jeton de chaîne.

Nous pouvons injecter la même syntaxe en utilisant MyClass fournisseur:

<code>providers: [ provide("aStringNameForMyClass", {useClass: MyClass} ]</code>

D'accord, nous avons appris à s'inscrire et à utiliser les fournisseurs, mais jetons un coup d'œil à ce que les fournisseurs reviennent.

fournisseur et singleton

Comme nous l'avons vu ci-dessus, le fournisseur est responsable de la génération des choses à injecter. Le fournisseur de classes génère une instance et l'injecte de lui. Cependant, il est important de comprendre que vous n'obtenez pas une nouvelle instance chaque fois que vous injectez le résultat du fournisseur de classe. Au lieu de cela, le système DI génère une instance une fois, le met en cache et reçoit la même instance pour chaque injection ultérieure chaque fois que vous utilisez le même fournisseur.

Le dernier point est important, car chaque composant a son propre injecteur et son propre fournisseur enregistré. MyClass a un jeu d'attribut de temps à l'heure actuelle (en millisecondes) et un nombre aléatoire pour nous aider à voir si nous obtenons la même instance à chaque fois. Nous ajouterons un composant ChildComp à l'application.

Figure 7: Injecter MyClass dans le constructeur. ChildComp

Notez que nous importons

et l'utilisons pour définir le type dans la liste des paramètres du constructeur. IMPORTANT: Le seul but de MyClass importé MyClass est à être utilisé comme jeton utilisé par le système DI pour trouver le fournisseur enregistré. ChildComp Parce que n'enregistre pas son propre fournisseur auprès du jeton, Angular recherche la hiérarchie de l'injecteur pour en trouver une. Pour que cela fonctionne, nous devons ajouter ChildComp au composant ChildComp: ProvDemo

Figure 8: S ChildComp a été ajouté au modèle. ProvDemo

Nous importons

, ajoutez l'attribut ChildComp à @Component pour dire directives nous utiliserons le composant ProvDemo et ajouterons l'élément ChildComp au modèle. Lorsque l'application est en cours d'exécution, la sortie de la console montre que ChildComp et ProvDemo reçoivent la même instance ChildComp: MyClass

<code>providers: [ provide(MyClass, {useClass: MyClass} ]</code>

Changeons maintenant

pour ajouter ChildComp à son fournisseur d'injecteur: MyClass

Figure 9: Définition de votre propre fournisseur MyClass. ParentComp

La seule chose que nous modifions est d'ajouter l'attribut

à l'annotation @Component. Bien sûr, nous pouvons voir que deux instances différentes providers ont été créées: MyClass

<code>providers: [ provide("aStringNameForMyClass", {useClass: MyClass} ]</code>

Cette fonctionnalité d'Angular offre beaucoup de flexibilité pour les résultats générés par tout fournisseur et si nous voulons utiliser une seule instance ou plusieurs instances. Par exemple, vous pouvez mettre le composant dans un répéteur pour générer le composant plusieurs fois. Si ce composant en double enregistre son propre fournisseur, chaque composant obtiendra un fournisseur unique. Cependant, si vous enregistrez un fournisseur uniquement dans le composant parent, chaque instance en double partage le fournisseur du composant parent.

Résumé

Dans cet article, nous définissons ce qu'est un fournisseur et introduit trois types différents de fournisseurs. Nous avons ensuite examiné comment enregistrer un fournisseur pour le composant et comment injecter les résultats générés par le fournisseur dans le composant. Nous avons également examiné comment Angular utilise la hiérarchie de l'injecteur pour trouver le fournisseur demandé. Angular vous donne plus de contrôle sur le fonctionnement des systèmes d'injection de dépendance et où trouver des fournisseurs, mais ce qui précède devrait vous aider à commencer à créer et à utiliser des fournisseurs dans votre application Angular 2.

FAQ sur Angular 2 Composants, fournisseurs, classes, usines et valeurs (FAQ)

Quelle est la différence entre une classe et une usine dans Angular 2?

Dans Angular 2, les classes sont les plans pour créer des objets. Il résume les données et les fonctions qui fonctionnent sur ces données. D'un autre côté, une usine est un modèle pour créer des objets. Dans Angular 2, les usines sont utilisées pour créer et configurer des services ou des valeurs qui n'ont pas de classes explicites à représenter. Factory fournit un moyen de générer différentes classes d'instances en fonction du contexte ou de la configuration.

Comment les composants et les fournisseurs interagissent-ils dans Angular 2?

Dans Angular 2, les composants et les fournisseurs travaillent ensemble pour créer une interface utilisateur dynamique et interactive. Les composants sont des éléments constitutifs d'applications angulaires et les fournisseurs sont utilisés pour créer des services que les composants peuvent utiliser. Les fournisseurs permettent aux composants de partager des données et des fonctionnalités, ce qui facilite la maintenance et la mise à jour des applications.

Que fait la valeur dans Angular 2?

Les valeurs d'Angular 2 sont utilisées pour fournir des informations de configuration à d'autres parties de l'application. Ils peuvent être injectés dans des contrôleurs, des services et des usines, permettant à ces parties de l'application d'être configurées à l'exécution. Cela rend l'application plus flexible et plus facile à tester.

Comment lier les classes dans Angular 2?

La liaison de la classe dans Angular 2 est un moyen d'ajouter et de supprimer dynamiquement les classes CSS aux éléments. Vous pouvez lier une classe à une expression, qui est ajoutée à l'élément lorsque l'expression évalue à true. Si l'expression évalue False, la classe sera supprimée. Cela vous permet de créer des interfaces utilisateur dynamiques et interactives.

Quelle est l'API dans le contexte d'Angular 2?

Dans le contexte d'Angular 2, l'API (interface de programmation d'application) est un ensemble de règles et de protocoles utilisés pour créer et interagir avec les applications logicielles. Angular 2 fournit une API riche qui permet aux développeurs de créer des applications complexes avec moins de code et d'efforts. L'API Angular 2 comprend des fonctionnalités de création de composants, de services, d'instructions, de pipelines, etc.

Comment utiliser une usine dans Angular 2?

Pour utiliser une usine dans Angular 2, vous devez d'abord le définir. Cela se fait en créant une fonction qui renvoie l'objet que vous souhaitez que l'usine génére. Vous pouvez ensuite enregistrer cette usine avec le module angulaire en utilisant la méthode .factory. Une fois l'usine enregistrée, vous pouvez l'injecter dans d'autres parties de l'application, telles que les contrôleurs et les services.

Comment créer des composants dans Angular 2?

La création d'un composant dans Angular 2 implique de définir une classe et de la décorer en utilisant le décoré @Component. @Component Le décorateur dit à Angular que la classe est un composant et fournit des métadonnées qui détermine comment le composant est traité, instancié et utilisé au moment de l'exécution.

Comment utiliser les fournisseurs dans Angular 2?

Le fournisseur d'Angular 2 est utilisé pour créer et fournir des services à la section de demande. Pour utiliser un fournisseur, vous devez d'abord l'enregistrer avec le module angulaire. Après l'enregistrement, le fournisseur peut être injecté dans des composants, d'autres services et même d'autres fournisseurs.

Comment créer un service dans Angular 2?

La création d'un service dans Angular 2 implique de définir une classe qui résume les nombres et les fonctions fournis par le service. Cette classe sera ensuite décorée d'un décorateur @Injectable qui indique à Angular que la classe est un service qui peut être injecté dans d'autres parties de l'application.

Comment utiliser les valeurs dans Angular 2?

Les valeurs d'Angular 2 sont utilisées pour fournir des informations de configuration à d'autres parties de l'application. Pour utiliser une valeur, vous devez d'abord l'enregistrer avec le module angulaire. Après l'enregistrement, la valeur peut être injectée dans le contrôleur, le service et l'usine.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!