Comment utiliser le décorateur de sortie dans Angular

Dans Angular, une page Web peut contenir de nombreux composants réutilisables différents. Chaque composant contient généralement sa propre logique TypeScript, son modèle HTML et son style CSS.

Vous pouvez également réutiliser des composants à l'intérieur d'autres composants. Dans ce cas, vous pouvez utiliser le décorateur Output pour renvoyer les informations d'un composant enfant à son composant parent.

Vous pouvez également utiliser le décorateur de sortie pour écouter les événements qui se produisent dans le composant enfant.

Comment ajouter le décorateur de sortie à un composant enfant

Tout d'abord, vous devrez créer une nouvelle application angulaire avec un composant parent et un composant enfant.

Une fois que vous avez un composant parent et un composant enfant, vous pouvez utiliser le décorateur de sortie pour transférer des données et écouter des événements entre les deux composants.

1. Créer un nouveau Application angulaire. Par défaut, "app" est le nom du composant racine. Ce composant comprend trois fichiers principaux: "app.component.html", "app.component.css" et "app.component.ts".
2. Pour cet exemple, le composant "app" agira en tant que composant parent. Remplacez tout le contenu de "app.component.html" par ce qui suit:

   <divclasse="composant parent">
   <h1> C'est le composant parent h1>
   div>

3. Ajoutez du style au composant d'application parent dans "app.component.css":

   .parent-composant {
   famille de polices: Arial, Helvétique, sans empattement;
   Couleur de l'arrière plan: corail clair;
   rembourrage: 20pixels
   }

4. Utilisez la commande "ng generate component" pour créer un nouveau composant angulaire appelé "composant de données". Dans cet exemple, "data-component" représentera le composant enfant.

   composant de données ng g c

5. Ajoutez du contenu au composant enfant dans "data-component.component.html". Remplacez le contenu actuel pour ajouter un nouveau bouton. Associez le bouton à une fonction qui s'exécutera lorsque l'utilisateur cliquera dessus:

   <divclasse="composant enfant">
   <p> Ceci est le composant enfant p>
   <bouton (Cliquez sur)="onButtonClick()">Cliquez sur moibouton>
   div>

6. Ajoutez du style au composant enfant dans "data-component.component.css":

   .child-composant {
   famille de polices: Arial, Helvétique, sans empattement;
   Couleur de l'arrière plan: bleu clair;
   marge: 20pixels;
   rembourrage: 20pixels
   }

7. Ajoutez la fonction onButtonClick() au fichier TypeScript du composant, dans "data-component.component.ts":

   onButtonClick() {
   }

8. Toujours dans le fichier TypeScript, ajoutez "Output" et "EventEmitter" à la liste des importations:

   importer { Composant, Sortie, EventEmitter, OnInit } depuis'@angular/noyau';

9. Dans la classe DataComponentComponent, déclarez une variable de sortie pour le composant appelé "buttonWasClicked". Ce sera un EventEmitter. Un EventEmitter est une classe intégrée qui vous permet d'informer un autre composant lorsqu'un événement se produit.

   exporterclasse Composant de données met en oeuvre OnInit {
   @Sortir() buttonWasClicked = nouveau Émetteur d'événement<annuler>();
   // ...
   }

10. Utilisez l'émetteur d'événement "buttonWasClicked" à l'intérieur de la fonction onButtonClick(). Lorsque l'utilisateur clique sur le bouton, le composant de données enverra cet événement au composant d'application parent.

    onButtonClick() {
    ce.buttonWasClicked.emit();
    }

Comment écouter les événements du composant enfant à partir du composant parent

Pour utiliser la propriété Output du composant enfant, vous devez écouter l'événement émis par le composant parent.

1. Utilisez le composant enfant dans "app.component.html". Vous pouvez ajouter la sortie "buttonWasClicked" en tant que propriété lors de la création de la balise HTML. Liez l'événement à une nouvelle fonction.

   <app-data-composant (buttonWasClicked)="bouton dans le composant enfant a été cliqué ()">app-data-composant>

2. Dans "app.component.ts", ajoutez la nouvelle fonction pour gérer l'événement de clic de bouton lorsqu'il se produit dans le composant enfant. Créer un message lorsque l'utilisateur clique sur le bouton.

   message: chaîne = ""
   buttonInChildComponentWasClicked() {
   ce.message = 'Le bouton dans le composant enfant a été cliqué';
   }

3. Affichez le message dans "app.component.html":

   <p>{{message}}p>

4. Tapez la commande "ng serve" dans un terminal pour exécuter votre application Angular. Ouvrez-le dans un navigateur Web sur localhost: 4200. Les composants parent et enfant utilisent des couleurs d'arrière-plan différentes pour faciliter leur distinction.
5. Clique sur le Cliquez sur moi bouton. Le composant enfant enverra l'événement au composant parent, qui affichera le message.

Comment envoyer des données d'un composant enfant à un composant parent

Vous pouvez également envoyer des données du composant enfant au composant parent.

1. Dans "data-component.component.ts", ajoutez une variable pour stocker une liste de chaînes contenant des données.

   listeDePersonnes: chaîne[] = ['Joey', 'John', 'James'];

2. Modifiez le type de retour de l'émetteur de l'événement buttonWasClicked. Changez-le de void en string[], pour qu'il corresponde à la liste de chaînes que vous avez déclarée à l'étape précédente:

   @Sortir() buttonWasClicked = nouveau Émetteur d'événement<chaîne[]>();

3. Modifiez la fonction onButtonClick(). Lors de l'envoi de l'événement au composant parent, ajoutez les données en tant qu'argument dans la fonction emission():

   onButtonClick() {
   ce.buttonWasClicked.emit(ce.listOfPeople);
   }

4. Dans "app.component.html", modifiez la balise "app-data-component". Ajoutez "$event" dans la fonction buttonInChildComponentWasClicked(). Celui-ci contient les données envoyées par le composant enfant.

   <app-data-composant (buttonWasClicked)=« buttonInChildComponentWasClicked($event) »>app-data-composant>

5. Mettez à jour la fonction dans "app.component.ts" pour ajouter le paramètre pour les données:

   buttonInChildComponentWasClicked (dataFromChild: chaîne[]) {
   ce.message = 'Le bouton dans le composant enfant a été cliqué';
   }

6. Ajoutez une nouvelle variable appelée "data" pour stocker les données provenant du composant enfant:

   message: chaîne = ""
   données: chaîne[] = []
   buttonInChildComponentWasClicked (dataFromChild: chaîne[]) {
   ce.message = 'Le bouton dans le composant enfant a été cliqué';
   ce.data = dataFromChild ;
   }

7. Affichez les données sur la page HTML:

   <p>{{data.join(', ')}}p>

8. Tapez la commande "ng serve" dans un terminal pour exécuter votre application Angular. Ouvrez-le dans un navigateur Web sur localhost: 4200.
9. Clique sur le Cliquez sur moi bouton. Le composant enfant enverra les données du composant enfant au composant parent.

Envoi de données à d'autres composants à l'aide du décorateur de sortie

Il existe d'autres décorateurs que vous pouvez utiliser dans Angular, tels que le décorateur Input ou le décorateur Component. Vous pouvez en savoir plus sur la façon dont vous pouvez utiliser d'autres décorateurs dans Angular pour simplifier votre code.