Fermer

août 26, 2021

Notions de base angulaires : liaison de données, partie 1—Interpolation


La liaison de données peut être déroutante lorsque vous démarrez dans Angular. Décomposons-le ! Cet article explique la liaison de données unidirectionnelle et bidirectionnelle, puis décrit en détail l'interpolation, que vous avez peut-être vue avec {{doubles accolades}}.

Ce message est le premier d'une série d'articles sur les données. reliure en Angular. Vous découvrirez les accolades doubles dans Angular, ce qu'elles sont et comment les utiliser dans cet article. les concepts de débutant et les processus d'installation ne sont pas supposés.

Voici quelques prérequis que vous devriez avoir pour suivre la démonstration de cet article avec Angular 12 :

  • Un environnement de développement intégré comme VS Code
  • Node version 11.0 installé sur votre machine[19659007]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écutez la commande dans une borne
ng version

Confirmez que vous utilisez la version 12, et mettez à jour vers la 12 si ce n'est pas le cas. ]Liaison de données

La liaison de données, en général, fait référence au processus d'accès aux données dans une partie d'une application à partir d'une autre. L'exemple le plus courant est celui du modèle à la section de vue d'une application.

Dans Angular, la liaison de données vous permet simplement de définir la communication de données entre un composant et le DOM via le modèle Angular.

Il existe deux façons de regarder. à la liaison de données dans Angular :

  1. Liaison de données unidirectionnelle : il s'agit de lier les données de l'une ou l'autre vue à un composant à l'aide d'une liaison d'événement ou d'un composant à afficher à l'aide d'une interpolation, d'une liaison de propriété, d'une liaison d'attribut ou d'une liaison de style.
  2. Deux- liaison de données de manière : cela implique essentiellement l'envoi de données du composant à la vue et de la vue au composant. syntaxe ou ce que vous appelleriez des accolades doubles (celles-ci : « {{ … }} ») cela s'appelle l'interpolation. Vous pouvez l'utiliser avec des variables, des objets et même des fonctions. Ils constituent un moyen très simple et direct d'afficher les données de n'importe quel composant. Essayons-le !

    Ce que nous construisons

    Nous allons créer une application angulaire simple pour tester toutes les façons dont nous pouvons tirer parti de la puissance de l'interpolation dans nos applications.

    Ouvrez votre code VS et créez un nouveau dossier dans un emplacement de votre choix, puis ouvrez le terminal et exécutez ces commandes :

    ng new
    ? Quel nom aimeriez-vous utiliser pour le nouvel espace de travail et le projet initial ? nouvelle application
    ? Souhaitez-vous ajouter un routage angulaire ? Non
    ? Quel format de feuille de style souhaitez-vous utiliser ? CSS
    

    Une nouvelle application sera générée pour vous. Accédez au dossier de l'application jusqu'au fichier app.component.html et remplacez le contenu HTML par le bloc de code ci-dessous :

    <div class="toolbar" rôle="banner">
      <span>Bienvenue[19659039]</span>
        <div class="spacer"></div >
        <a aria-label="Angular sur twitter" cible=" _blank" rel="noopener" href="https:// twitter.com/angular" title="Twitter">
        </a>
    </div>
    <div class="content" role="main ">
    
      <div class="card Highlight-card card-small">
    <svg id="fusée" alt="Rocket Ship" xmlns="http://www.w3.org/2000/svg" largeur=[19659031]"101.678" hauteur="101.678" viewBox="0 0 101,678 101,678">
          <g id="Group_83" data-name="Groupe 83 " transform="translate(-141 -696)">
            <circle id="Ellipse_8" data-name="Ellipse 8 " cx="50.839" cy="50.839"  r="50.839" transform="translate(141 696)"  fill="#dd0031"/>
          </g>
        </svg>
    L'application <span>{{ title }} est en cours d'exécution !</span>
    <svg id="fusée-fusée" alt="Rocket Ship Smoke" xmlns="http://www.w3.org/2000/svg" largeur ="516.119" hauteur="1083.632" viewBox= "0 0 516.119 1083.632">
        </svg>
    </div>
    
      <h2>Ressources</h2>
      <p>Voici quelques liens pour vous aider vous commencez :</p>
    <div class="card-container">
        <a class="carte" cible="_blank " rel="noopener" href=#>
          <svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659031]"24" viewBox="0 0 24 24"> </svg>
    <span>Apprendre Angular</span>
    <svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659031]"24" viewBox="0 0 24 24"> </svg> </a>
    <a class="carte" cible="_blank " rel="noopener" href=#>
          <svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659031]"24" viewBox="0 0 24 24"> </svg>
    <span>Documentation CLI</span>
    <svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659031]"24" viewBox="0 0 24 24"> </svg>
        </a>
    <a class="carte" cible="_blank " rel="noopener" href=#>
          <svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659031]"24" viewBox="0 0 24 24"> </svg>
    <span>Blog angulaire</span>
    <svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659031]"24" viewBox="0 0 24 24"> </svg>
        </a>
    </div>
    </div>
    

    Ensuite, accédez au fichier app.component.ts et assurez-vous qu'il ressemble exactement à ceci :

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

    Commençons maintenant à examiner les différentes manières dont l'interpolation dans Angular peut être effectuée.

    Interpolation de variable

    Ici, vous pouvez envoyer la valeur de n'importe quelle variable que vous créez dans votre fichier de composant au modèle avec le double bouclé crochets.

    Dans le fichier, copiez ce bloc de code et collez-le dans la classe AppComponent :

    export class AppComponent {
      titre = 'nouvelle application';
      variable1 = 'Premier bouton';
      variable2 = 'Deuxième bouton';
      variable3 = 'Troisième bouton';
    }
    

    Ce sont trois nouvelles variables que nous avons créées et nous allons maintenant lier les valeurs de données au modèle. Accédez au fichier app.component.html et mettez à jour le bloc de code pour inclure ces accolades :

    <div class="card-container" >
        <a class="carte" cible="_blank " rel="noopener" href=#>
          <svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659031]"24" viewBox="0 0 24 24"> </svg>
    <span>{{variable1}}</span>
    <svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659031]"24" viewBox="0 0 24 24"> </svg> </a>
    <a class="carte" cible="_blank " rel="noopener" href=#>
          <svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659031]"24" viewBox="0 0 24 24"> </svg>
    <span>{{variable2}}</span>
    <svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659031]"24" viewBox="0 0 24 24"> </svg>
        </a>
    <a class="carte" cible="_blank " rel="noopener" href=#>
          <svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659031]"24" viewBox="0 0 24 24"> </svg>
    <span>{{variable3}}</span>
    <svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659031]"24" viewBox="0 0 24 24"> </svg>
        </a>
    </div>
    

    Si vous exécutez l'application sur votre serveur de développement, cela devrait ressembler à ceci dans votre navigateur :

    Page Ressources, Voici quelques liens pour vous aider à démarrer, puis trois boutons (Premier bouton, Deuxième bouton, Troisième bouton).

    Vous voyez comment ces données de la variable sont devenues liées au modèle comme ça.

    Interpolation de données de fonction

    Vous pouvez également créer le même effet à l'aide de fonctions. Écrivons une fonction simple qui remplace le troisième bouton.

    export class AppComponent {
      titre = 'nouvelle application';
      variable1 = 'Premier bouton';
      variable2 = 'Deuxième bouton';
      variable3 = 'Troisième bouton';
    alertFunction (){
        return 'Nouveau troisième bouton'
      }[19659377]}
    

    Cette fonction d'alerte renvoie simplement une chaîne, maintenant si vous accédez à votre fichier modèle et modifiez le :

    <span>{{variable3}}</envergure>
    

    à :

    <span>{{**alertFunction()**}}</span>
    

    Vous voyez comment vous ajoutez l'appel de fonction (avec les crochets) et l'interpolation se passe comme ça. Vous verrez qu'il ressemble maintenant à ceci :

    La même capture d'écran, mais le troisième bouton est maintenant intitulé Nouveau troisième bouton

    Vous commencez à voir à quel point les possibilités de cas d'utilisation sont infinies avec ce syntaxe simple. Il y a plus – l'interpolation des données d'objets est également possible.

    Interpolation de données d'objets

    Oui, même les données d'objets peuvent être interpolées dans Angular, définissons donc un objet de boutons.

    export class[19659381]AppComponent {
      titre = 'nouvelle application';
      variable1 = 'Premier bouton';
      variable2 = 'Deuxième bouton';
      variable3 = 'Troisième bouton';
    alertFunction (){
        return 'Nouveau troisième bouton'
      }
    boutons = {
        var1 :'Premier bouton',
        var2 : 'Deuxième bouton',
        var3 : 'Troisième bouton'
      }
    }
    

    Maintenant dans votre fichier modèle, modifiez ces lignes :

    <span>{{variable1}}</span>
    <span>{{variable2}}</span>
    <span>{{variable3}}</span>
    

    à ceci :

    <span>{{buttons.var1}}</span>
    <span>{{buttons.var2}}</span>
    <span>{{buttons.var3}}</span>
    

    Tout comme vous appelleriez un objet, et le résultat sur votre serveur de développement sera exactement comme vous l'attendez. interpolation. Nous avons examiné différentes manières et structures de données qui peuvent utiliser cette fonctionnalité très angulaire et à quel point elle peut être utile pour décomposer la logique de votre cas d'utilisation. Restez à l'écoute pour les prochains articles sur la liaison de données dans Angular.






Source link