Fermer

février 2, 2021

Comprendre la liaison de propriété Angular 11


Examinons la liaison de propriété dans Angular, une technique de liaison de données unidirectionnelle utilisée pour transférer des données.

Angular

Angular, le framework JavaScript (TypeScript) de Google pour la création d'applications Web, mobiles ou de bureau avec plus de 70 000 étoiles sur GitHub. Géré par l'équipe angulaire de Google et une foule de membres de la communauté et d'organisations.

Avant de commencer

Pour pouvoir suivre la démonstration de cet article, vous devez avoir:

  • Un environnement de développement intégré comme VS Code [19659007] Node version 11.0 installée sur votre machine
  • Node Package Manager version 6.7 (il est généralement livré avec l'installation Node)
  • Angular CLI version 8.0 ou supérieure
  • La ​​dernière version d'Angular (version 11)
 // exécuter la commande    dans  un terminal
version ng

Confirmez que vous utilisez la version 11, et mettez à jour vers la version 11 si vous ne l'utilisez pas.

D'autres choses qui seront utiles sont:

  • Connaissance pratique du framework Angular à un niveau débutant

] Dans cet article, vous découvrirez la liaison de propriété dans Angular, son utilisation et son fonctionnement.

La ​​liaison de propriété

Dans Angular, l'un des moyens de transmettre des valeurs d'un composant à son modèle avec une valeur définie se fait via la liaison de propriété. C'est un excellent exemple d'une technique de liaison de données unidirectionnelle utilisée pour transférer des données.

Syntaxe

  

Donc, fondamentalement au backend, lorsque nous lions un modèle ou un élément DOM à un champ défini, ce champ est défini à l'intérieur du composant Angular transforme simplement l'interpolation de chaîne en liaison de propriété.

Pourquoi la liaison de propriété est importante

L'un des avantages de la liaison de propriété est le contrôle que vous obtenez sur les éléments de votre modèle à partir du composant lui-même. Angular trouve de très bons moyens de donner aux développeurs le contrôle total des outils avec lesquels ils travaillent et c'est un excellent exemple de cela. Le développeur peut dicter la manière dont les données circulent et sont mises à jour avec sa propre logique sur n'importe quel élément DOM sans restrictions.

Ce que nous allons construire

Nous illustrerons la liaison de propriété dans Angular dans un nouveau projet Angular juste pour montrer vous comment cela fonctionne. Ouvrez un emplacement sur votre PC et créez un nouveau projet angulaire en exécutant:

 ng new testapp

Après avoir choisi des spécifications telles que le type de feuille de styles et les options de routeur, vous aurez un échafaudage d'application angulaire prêt. Vous pouvez exécuter l'application en cours de développement avec ces commandes:

  cd  testapp
ng servir

Si vous visitez votre fichier app.component.html, vous verrez qu'il y a beaucoup de code passe-partout. Supprimons tout pour ressembler à l'ancien Angular 7. Copiez le bloc de code ci-dessous dans le fichier app.component.html:


Bienvenue dans {{title}}!

 Angular Logo

Voici quelques liens pour vous aider à démarrer:

Nous verrons quelques cas d'utilisation simples où vous pouvez facilement effectuer une liaison de propriété.

Changer le style de couleur d'un élément

Le fichier de votre composant d'application devrait ressembler à ceci:

 import   {  Component }   from   '@ angular / core' ; 
@  Composant  ( {
sélecteur :   'app-root' 
templateUrl :   './ app.component.html' 
styleUrls :   [ './ app.component.css' ] 
} ) 
 export   class   AppComponent   {
title  =   'testapp' ; 
peinture  =   'verte' ; 
} 

Ici, nous avons défini une variable et lui avons attribué une propriété de green. Maintenant, pour le lier à l'un des éléments de la liste, nous pouvons utiliser la syntaxe que nous avons déjà vue dans cet article.

 < template_element  [ property ]  = [19659041] 'propriété' > 

Copiez le bloc de code ci-dessous et collez-le dans votre fichier modèle (app.component.html):


Bienvenue dans {{title}}!

 Angular Logo

Voici quelques liens pour vous aider à démarrer:

Si vous regardez la dernière balise d'en-tête, vous remarquerez que nous avons lié la valeur de la variable que nous avons créée (peinture) dans le composant à la valeur de couleur du style en ligne que nous avons spécifié ici.

Pour avoir un lien de source d'image défini dans notre composant et ensuite passé à la vue, copiez une image aléatoire que vous avez déjà sur votre machine dans le dossier des ressources. Copiez ensuite le code ci-dessous dans votre fichier app.component.html:


Bienvenue dans {{title}}!

 Angular Logo

Voici quelques liens pour vous aider à démarrer:

Vous pouvez voir que la source de l'image est liée à la variable appelée src. Ouvrez maintenant votre fichier component.ts et définissez la variable, comme ci-dessous:

 import {Component} from '@ angular / core';
@Composant({
  sélecteur: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
classe d'exportation AppComponent {
  title = 'cdktest';
  peinture = 'vert';
  src = "http://www.telerik.com/assets/d.jpg";
}

Désactivation d'un bouton avec liaison de propriété

Enfin, désactivons un bouton par la valeur d'une propriété liée. Dans votre fichier de modèle, ajoutez un bouton à votre code:


Bienvenue dans {{title}}!

 Angular Logo

Voici quelques liens pour vous aider à démarrer:

Vous voyez que nous utilisons le bouton de désactivation du DOM et nous l'attribuons à la valeur de commutateur. Définissons maintenant switch avec une valeur vraie. Ceci est dû au fait que disabled prend une valeur booléenne.

 import {Component} from '@ angular / core';
@Composant({
  sélecteur: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
classe d'exportation AppComponent {
  title = 'cdktest';
  peinture = 'vert';
  src = "http://www.telerik.com/assets/d.jpg";
  commutateur = 'vrai';
}

Maintenant, si vous cochez le bouton dans votre navigateur, vous verrez qu'il est actuellement désactivé et si vous changez la valeur en false, il devient activé.

Conclusion

Dans cet article, nous avons jeté un coup d'œil à la propriété contraignant dans Angular, ce que c'est, pourquoi il est important et surtout comment il est utilisé. Vous pouvez voir qu'il a plusieurs cas d'utilisation et que vous pouvez donc jouer avec et trouver des moyens plus ingénieux de l'intégrer à votre flux de travail angulaire. Bon piratage!





Source link