Liaison de données Partie 6—Décorateur d'entrée

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 parent à un composant enfant avec le décorateur d'entrée.

Dans cet article, nous examinerons comment les données peuvent être transmises d'un composant parent à un composant enfant en toute sécurité dans Angular à l'aide de décorateur d'entrée.

Avant de commencer

Ce message convient à tous les niveaux de développeurs front-end qui utilisent Angular, il n'est donc pas supposé être familiarisé avec les concepts et les processus d'installation pour débutants. 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 d'entrée ?

Le décorateur d'entrée est un décorateur couramment utilisé lors de la création de projets angulaires. Il est utilisé pour transmettre des données d'un composant parent à un composant enfant.

Angular est l'un des nombreux frameworks de développement frontend dont les composants sont conçus pour être réutilisables. La réutilisabilité dans ce contexte signifie simplement que vous pouvez utiliser un composant, le réutiliser dans un autre contexte, parfois en tant que composant parent ou imbriqué en tant que composant enfant.

Dans l'article d'aujourd'hui, nous examinons un aspect important de la relation parent-enfant, à savoir comment nous transmettons les données du composant parent au composant enfant avec le décorateur d'entrée. Angular facilite la gestion de chaque type d'interaction au sein d'un composant. composants enfants et montrer comment nous pouvons facilement transmettre des données du composant parent au composant enfant.

Ouvrez votre application VS Code et accédez à la palette de commandes (tapez Command + Shift + P sur Mac ou Ctrl + Shift + P sur PC) pour ouvrir l'assistant Kendo UI. 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 newcomp

Maintenant, tout est prêt : nous avons à la fois des composants parent et enfant. Accédez au fichier app.component.html et remplacez le code à l'intérieur par le bloc de code ci-dessous :

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

Dans le composant newcomp, remplacez le contenu par le bloc de code ci-dessous :

<h2>Ceci est le composant enfant</h2> 
<p>newcomp fonctionne !</p>

Vous exécutez maintenant l'application sur le serveur de développement avec la commande :

 ng serve

Votre navigateur devrait ressembler à ceci à localhost:4200.

Créons maintenant des menus pour végétaliens et non -les personnes végétaliennes telles que vous obtenez une salade végétalienne si vous êtes végétalien ou vous obtenez du poulet et des frites si vous ne l'êtes pas.

Dans le fichier HTML du composant enfant, collez le bloc de code ci-dessous :

< h2>Ceci est le composant enfant</h2>
<p>newcomp fonctionne !</p>
<h4 *ngIf='!vegan; else elseBlock'> Voici vos ailes de poulet et frites</h4>
<ng-template #elseBlock>Voici votre salade Vegan </ng-modèle>

Ici, nous disons si végétalien est vrai, servez une salade végétalienne et si végétalien est faux, servez du poulet et des frites.

Nous devons maintenant initialiser la variable végétalien dans le fichier de composant. Accédez au fichier component.ts et assurez-vous qu'il ressemble à ceci :

import { Component, OnInit } from '@angular/ noyau';
@Composant({
  sélecteur : 'app-newcomp',
  templateUrl: './newcomp.component.html',
  styleUrls: ['./newcomp.component.scss']
})
export class NewcompComponent implements[19659122]OnInit {
végétalien = true;
  constructor() { }
ngOnInit():[19659106]vide {
  }
}

Maintenant, si vous changez l'état de vrai à faux, vous verrez que le résultat attendu est atteint. Ressources. Un bon exemple est cette application de restauration que nous construisons. La valeur vegan peut être utilisée dans d'autres composants que celui que nous utilisons actuellement. Ainsi, il est parfois logique que les valeurs de ces états soient stockées dans un composant central, un composant parent dans notre cas.

Angular fournit un moyen simple de le faire – en utilisant le décorateur d'entrée. Vous pouvez maintenant créer et gérer une valeur de données dans un composant parent et la transmettre au composant enfant qui en a besoin.

La première chose à faire est de dire à Angular quelle valeur de composant enfant vous attendez d'un parent. .

import { Component, OnInit, Input } from '@angular/core' ; 
@Composant({
  sélecteur : 'app-newcomp',
  templateUrl: './newcomp.component.html',
  styleUrls: ['./newcomp.component.scss']
})
export class NewcompComponent implements[19659122]OnInit {
@Input() vegan: boolean;
  constructor() { }[19659133]ngOnInit(): void {
  }
}

Vous voyez comment nous avons importé des entrées de la bibliothèque principale d'Angular, puis avons demandé à Angular de s'attendre à ce que la valeur végétalienne soit booléenne du composant parent.

La prochaine chose est d'aller au composant parent et de définir réellement la valeur que nous sommes. va envoyer au composant enfant. Mettez à jour le fichier du composant d'application avec ceci :

export class AppComponent {
veganValue = false;
}

Vous voyez que nous avons créé une nouvelle variable avec une valeur booléenne. Maintenant, pour établir la connexion du parent à l'enfant, nous utilisons la liaison de propriété. Dans le fichier HTML du composant d'application, utilisez une liaison de propriété comme celle-ci :

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

Et c'est exactement ainsi que nous passons les valeurs de données d'un composant parent à un composant enfant. . Vous avez également appris le décorateur d'entrée et comment l'utiliser pour transmettre facilement des valeurs de données du composant parent au composant enfant. Restez à l'écoute pour plus de messages sur la liaison de données dans Angular. Bon piratage !