Fermer

juin 3, 2019

Compréhension de la liaison et de l'interpolation de propriétés angulaires


Comprendre les types de liaison de données angulaires est important lors de la création d’applications angulaires. Apprenez-en davantage sur la liaison et l'interpolation de propriétés afin de comprendre la méthode la mieux adaptée à la tâche à accomplir.

Lors de la création d'applications à l'aide de Angular, vous entrez en contact de deux manières différentes pour afficher les données dans la vue. La liaison de propriété et l'interpolation sont les types de liaison de données dans Angular, utilisés pour déplacer des données du composant vers le modèle.

La liaison de données est un aspect très important et puissant du développement logiciel. Cela implique le concept de définir la communication entre un composant et ses vues respectives. La liaison de données permet dynamisme et interactivité dans les applications.

Il existe environ quatre types de liaison de données disponibles dans Angular:

  1. Liaison événement: Ce type de liaison de données existe lorsque l’information passe de la vue au composant lorsqu’une l'événement est déclenché. La vue envoie les données d'un événement comme le clic d'un bouton à utiliser pour mettre à jour le composant. C'est l'opposé exact de la liaison de propriété, où les données vont du composant à la vue. Un exemple de ce type de liaison de données peut être décrit à l'aide de l'exemple ci-dessous:
        

         // composant.html

     < p >  Je m'appelle {{name}}  </  p > 
     < button   (cliquez sur)  =  " updateName () "  >  Bouton de mise à jour  </  bouton >

        

     

    @  Composant  ( {
      templateUrl :   'composant.html' 
      sélecteur :   'app-composant' 
    } ) 
     classe d'exportation   classe   Composant   {
      nom  =   'Peter' ; 

       updateName  ()   {
         ce .  nom  =   'John' ; 
      } 
    }
  2. Liaison de données bidirectionnelle: La liaison bidirectionnelle est un mécanisme dans lequel les données circulent dans les deux sens, du composant à la vue et inversement. Le composant et la vue sont toujours synchronisés et les modifications apportées à l'une ou l'autre extrémité sont immédiatement mises à jour dans les deux sens. La liaison bidirectionnelle est couramment utilisée dans les formulaires où l'entrée utilisateur est utilisée pour mettre à jour l'état du composant et vice versa.
  3. Interpolation: Ce mécanisme de liaison de données sera décrit en détail dans cet article. Dans la technique, le texte représentant les variables dans les composants est placé entre des doubles accolades dans le modèle. Angular trouve la variable correspondant au texte dans le composant et remplace le texte par la valeur affectée à la variable. Les chiffres, les chaînes, etc. peuvent être utilisés directement entre les accolades.
        

         // composant.html
    
     < p >  {{name}}  </  p >

        

     
    
    @  Composant  ( {
      templateUrl :   'composant.html' 
      sélecteur :   'app-composant' 
    } ) 
     classe d'exportation   classe   Composant   {
      name  =   'Peter' ; 
    }
  4. Liaison de propriété: La liaison de propriété est un mécanisme à sens unique qui vous permet de définir la propriété d'un élément d'affichage. Cela implique de mettre à jour la valeur d'une propriété du composant et de la lier à un élément du modèle de vue. La liaison de propriété utilise la syntaxe [] pour la liaison de données. Un exemple consiste à définir l'état désactivé d'un bouton.
        

         // composant.html
    
     < button   [disabled]  =  " bouton Désactivé "  >   </  bouton [19659008]>

        

     
    @  Composant  ( {
      templateUrl :   'composant.html' 
      sélecteur :   'app-composant' 
    } ) 
     classe d'exportation   classe   Composant   {
      buttonDisabled  =   true ; 
    }

Interpolation de chaîne

L'interpolation est un mécanisme permettant l'intégration de valeurs de chaîne définies dans du texte, au sein de balises et d'attributs HTML. affectations dans la couche de présentation (vue). L'interpolation utilise la syntaxe {{}} pour incorporer des expressions de modèle qui seront converties par Angular en texte balisé dans la couche de vue.

      < p >  Compte de résultats: {{5 + 5}}  </  p >

L'extrait ci-dessus montre un exemple d'interpolation de chaîne. Dans l’exemple ci-dessus, Angular exécutera l’expression entre les accolades et transformera 10 en tant que texte de l’élément plutôt que 5 + 5 . Toutes les expressions entre les accolades ne sont pas autorisées. Vous ne pouvez pas déclarer une variable:

      < p >  {{score const = 5 + 5  </  p >

L'exemple ci-dessus n'est pas autorisé et générera une erreur. Un autre exemple d'expressions non autorisées est l'initialisation d'une classe:

      < p >  {{nouvelle date ()}}  </  p >

Cela jettera une erreur, car la déclaration d’objets lors de l’utilisation de l’interpolation de chaîne n’est pas autorisée. Les fonctions avec une valeur de retour d'autre part peuvent être appelées, et Angular évaluera l'expression et la convertira en chaîne.

      < p >  {{convertToDate ()}}  </  p >

La fonction convertToDate peut ressembler à:

  fonction   convertToDate  ()  {
  const  date .   new   Date  () ; 
  return  date
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
   
 
Source link