Liaison de données Partie 7—Décorateur de sortie

La liaison de données peut être déroutante lorsque vous démarrez dans Angular. Décomposons-le ! Cet article couvre la liaison de données unidirectionnelle d'un composant enfant à un composant parent avec le décorateur de sortie et les émetteurs d'événements.

Dans cet article, nous verrons comment les données peuvent être transmises d'un composant enfant à un composant parent en toute sécurité. Angulaire avec le décorateur de sortie. Nous avons déjà vu comment transmettre des données du composant parent au composant enfant – lisez ici les décorateurs d'entrée .

Avant de commencer

Ce message convient à tous les niveaux de développeurs front-end qui utilisent Angular, donc être familiarisé avec les concepts de débutant et les processus d'installation n'est pas supposé. Voici quelques prérequis que vous devez avoir avant de commencer à utiliser Angular 12 et suivez la démonstration de cet article :

• VS Code pour votre environnement de développement intégré
• Node version 11.0 installé sur votre machine
• Node Package Manager version 6.7 (il est généralement livré avec l'installation de Node)
• Angular CLI version 8.0 ou supérieure
• La dernière version d'Angular (version 12)

// exécuter la commande dans un terminal
ng version

Confirmez que vous utilisez la version 12, et mettez à jour vers la 12 si ce n'est pas le cas. Décorateur de sortie ?

Le décorateur de sortie est utilisé pour transmettre les données du composant enfant vers le haut vers le parent dans l'arborescence des composants. L'appel du décorateur de sortie lie la propriété à la classe d'émetteur d'événements, comme nous le verrons ci-dessous.

Ce que nous construisons

Nous allons utiliser l'assistant d'interface utilisateur Kendo pour créer une nouvelle application Angular dans VS Code. Ensuite, avec cette application, nous allons créer des composants enfants et montrer comment nous pouvons facilement transmettre des données du composant enfant au composant parent.

Ouvrez votre application VS Code et accédez à la palette de commandes (tapez Commande + Shift + P sur Mac ou Ctrl + Shift + P sur PC) pour ouvrir l'assistant d'interface utilisateur de Kendo. Si vous n'avez pas encore installé l'assistant d'interface utilisateur Kendo, accédez à l'onglet Extensions, recherchez l'assistant de modèle d'interface utilisateur Kendo et installez-le. Redémarrez l'application VS Code, puis revenez à la palette de commandes pour ouvrir l'assistant d'interface utilisateur Kendo.

Choisissez Angular, puis choisissez vierge avec 1 page et cliquez sur "Suivant".  » title= »wizard-page »/>

Choisissez CSS par défaut comme style et cliquez sur « Créer ». Une fois terminé, cliquez sur "Ouvrir un nouveau projet". Ouvrez le terminal et téléchargez toutes les dépendances Node avec cette commande :

npm install

Après cela, vous pouvez exécuter l'application sur le serveur de développement avec cette commande :

ng serve

L'application devrait ressembler à ceci si vous visitez localhost:4200 dans votre navigateur.

Si vous jetez un œil à la structure des fichiers, vous verrez que le dossier de l'application est le dossier racine. Considérons-le comme le composant parent aux fins de la session d'aujourd'hui. Maintenant, pour créer un composant enfant, nous pouvons en générer un dans le terminal à l'aide de la CLI angulaire comme ceci :

ng generate component components/child

Cela génère un nouveau composant dont nous allons faire le composant enfant dans notre projet aujourd'hui.

Votre fichier app.component.html devrait être exactement comme ceci :

<div style ="text-align: center; padding: 30px;" >
    <h1>C'est le composant parent</h1>
    <p[19659036]>Dans cette application, nous allons découvrir les relations entre les composants parent et enfant</p>
    <hr>
    <app-child></app-child>
    </div>

Si vous vérifiez votre navigateur sur localhost:4200, il devrait maintenant ressembler à ceci :

Nous avons la ligne horizontale pour séparer les deux Composants. Dans le fichier HTML de votre composant enfant, remplacez le contenu par celui-ci :

<h2>Ceci est le composant enfant</h2>
<p>Cliquez autour de l'en-tête pour afficher "un nouveau message" à l'intérieur du composant parent</p>

Tout comme dans le dernier article sur les décorateurs d'entrée, examinons le décorateur de sortie. composant à un composant parent. Angular rend cela très facile en créant une porte appelée décorateur de sortie, que vous pouvez utiliser pour y parvenir. Votre composant enfant peut utiliser le décorateur de sortie pour déclencher un événement et notifier le composant parent d'un changement à l'aide d'un émetteur d'événement et c'est ainsi qu'ils vont de pair.

Commençons par montrer comment fonctionne le décorateur de sortie. utilisé.

Commencez par le composant enfant

Dans votre fichier component.ts enfant, remplacez le contenu par le bloc de code ci-dessous :

import { Component, OnInit,Sortie, EventEmitter } de '@angular/core';
@Composant({
  sélecteur: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements[19659099]OnInit {
message: string = 'Un nouveau message';
  @Output() messageData: EventEmitter<string> = new EventEmitter[19659036]()
constructeur() { }
ngOnInit(): void  {
  }
sendMessage(){
    this.messageData.emit(this[19659036].message);
  }
}

Dans l'instruction import, nous avons introduit la sortie et l'émetteur d'événements avant de l'utiliser, nous avons déclaré une nouvelle variable appelée message et créé notre porte, et l'avons associée à un émetteur d'événements. La prochaine chose que nous avons faite a été de créer une méthode appelée sendMessage pour réellement déclencher l'action d'émission.

Maintenant que nous avons terminé la configuration, nous devons créer un événement qui déclenche les données à transmettre à partir de l'enfant au composant parent. Dans le fichier de modèle de composant enfant, ajoutez l'événement ci-dessous :

<div (click)="sendMessage()" >
    <h2>Ceci est le composant enfant</h2>
<p>Cliquez autour de l'en-tête pour afficher "un nouveau message" à l'intérieur du composant parent</p>
</div>

Ainsi, chaque fois que l'on clique sur le composant enfant, le message doit être envoyé au composant parent. données au composant parent. Pour recevoir ces données, nous devons créer une variable qui stocke la chaîne dans notre composant parent. Le fichier component.ts de votre application devrait ressembler à ceci :

import { Component } from '@angular/core';
@Composant({
  sélecteur: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  reçuMessage: string = '';
getData(event: any){ 
    ceci.recevedMessage = événement;
  }
}

Nous appelons la chaîne message reçu et affectons simplement les données d'événement que nous obtenons, qui sont le « nouveau message » à la nouvelle variable. Juste comme ça, nous avons passé des données du composant enfant au composant parent de manière évolutive. Votre navigateur devrait ressembler à ceci :

Conclusion

Cela a été une façon amusante de découvrir le décorateur de sortie fourni par Angular pour transmettre les données du composant enfant au composant parent. Dans cet article, vous avez vu comment il est utilisé et pourquoi il peut être utile. Bon piratage !