Requêtes d’entrée, de sortie et de vue

Découvrez les requêtes d’entrée, de sortie et de vue : des API essentielles pour transmettre des données, déclencher des événements et récupérer des composants enfants ou des éléments DOM dans Angular.

Angular, un framework polyvalent pour la création d’applications Web dynamiques, offre aux développeurs divers outils pour gérer les interactions des composants et la manipulation du DOM. Précédemment, nous avons discuté L’API Signals d’Angular et son rôle dans la gestion de l’état. Dans cet article, nous aborderons d’autres éléments essentiels de la communication des composants :Saisir, Sortir et Afficher les requêtes– des API essentielles pour transmettre des données, déclencher des événements et récupérer des composants enfants ou des éléments DOM.

Les exemples de code de cet article sont adaptés du documentation angulaire officielleavec des extensions et des explications ajoutées le cas échéant. Allons-y !

Propriétés d’entrée

Dans Angular, les composants sont les éléments constitutifs de votre application. Vous souhaiterez souvent transmettre des données d’un composant parent à un composant enfant. C’est ici Propriétés d’entrée (c’est-à-dire parfois appelés entrées de signal) entrent en jeu. Les propriétés d’entrée permettent à un composant parent de lier des valeurs aux propriétés d’un composant enfant, facilitant ainsi le flux de données dans le composant enfant.

Nous utilisons le input() fonction de @angular/core pour déclarer une propriété d’entrée. Cette fonction crée un signal qui contient la valeur transmise par le composant parent.

import { Component, input } from '@angular/core';

@Component({})
export class CustomSliderComponent {
  value = input(0);
}

Dans l’exemple ci-dessus, le value propriété de CustomSliderComponent est une entrée qui peut recevoir des données d’un composant parent. Nous l’initialisons avec une valeur par défaut de 0.

Les propriétés d’entrée sont des signaux, nous lisons donc leurs valeurs en les appelant comme fonctions. En conséquence, le value() La fonction peut être utilisée dans le modèle pour afficher la valeur actuelle.

import { Component, input } from '@angular/core';

@Component({
  selector: 'app-custom-slider',
  template: `
    <div>
      <p>Value: {{ value() }}</p>
    </div>
  `,
})
export class CustomSliderComponent {
  value = input(0);
}

Pour transmettre des données au CustomSliderComponentnous nous lions à sa propriété d’entrée dans le modèle du composant parent comme suit :

<app-custom-slider [value]="50"></app-custom-slider>

Ici, nous définissons le value entrée de CustomSliderComponent à 50.

Pour une bonne lecture de la différence entre les décorateurs d’entrée traditionnels et les signaux d’entrée, consultez l’article que nous avons déjà écrit sur Pourquoi passer aux signaux d’entrée : au revoir, @Input() 👋.

Événements de sortie

Alors que les propriétés d’entrée permettent aux données de circuler dans un composant, Événements de sortie permettre aux composants d’émettre des événements vers leurs composants parents. Ceci est essentiel pour la communication des composants enfants vers les parents, en particulier lorsque des interactions utilisateur se produisent.

Pour définir un événement de sortie, nous pouvons utiliser le output() fonction de @angular/core:

import { Component, output } from '@angular/core';

@Component({
  selector: 'app-expandable-panel',
  template: `
    <div>
      <button (click)="closePanel()">Close Panel</button>
    </div>
  `,
})
export class ExpandablePanelComponent {
  panelClosed = output<void>();

  closePanel() {
    this.panelClosed.emit();
  }
}

Dans l’exemple ci-dessus, panelClosed est un événement de sortie qui est émis lorsque le panneau est fermé, et le emit() La méthode est utilisée pour déclencher l’événement. Les composants parents peuvent ensuite écouter les événements de sortie à l’aide de la syntaxe de liaison d’événements :

<app-expandable-panel (panelClosed)="onPanelClosed()"></app-expandable-panel>

Dans le fichier TypeScript du composant parent, nous définissons ensuite le onPanelClosed() méthode pour gérer l’événement.

onPanelClosed() {
  console.log('Panel was closed. Event was emitted.');
}

Émission de données d’événement

Les événements de sortie peuvent également émettre des données. Vous trouverez ci-dessous un exemple simple d’émission de données numériques à partir du composant enfant.

import { Component, output } from '@angular/core';

@Component({
  selector: 'app-value-changer',
  template: `
    <button (click)="changeValue()">Change Value</button>
  `,
})
export class ValueChangerComponent {
  valueChanged = output<number>();

  changeValue() {
    this.valueChanged.emit(42);
  }
}

Les composants parents peuvent ensuite accéder aux données émises à l’aide du $event variable:

<app-value-changer (valueChanged)="onValueChanged($event)"></app-value-changer>

onValueChanged(newValue: number) {
  console.log(`New value is ${newValue}`);
}

Afficher les requêtes

Afficher les requêtes peut accéder à des éléments, des directives ou des composants enfants dans le modèle d’un composant. Ils sont particulièrement utiles lors de l’interaction ou de la manipulation directe d’éléments enfants.

Pour interroger un seul élément ou composant, nous pouvons utiliser le viewChild() fonction:

import { Component, viewChild } from '@angular/core';

@Component({
  selector: 'app-custom-card-header',
  template: `<h1>{{ title }}</h1>`,
})
export class CustomCardHeader {
  title = 'Header Title';
}

@Component({
  selector: 'app-custom-card',
  template: `<app-custom-card-header></app-custom-card-header>`,
})
export class CustomCard {
  header = viewChild(CustomCardHeader);

  getHeaderTitle() {
    return this.header()?.title; 
  }
}

Dans l’exemple de code ci-dessus, le viewChild() la fonction fait référence au CustomCardHeader composant et accéder à son title propriété.

Si nous avons plusieurs instances et que nous souhaitons toutes les interroger, nous pouvons utiliser la méthode viewChildren() fonction:

@Component({
  selector: 'app-custom-action',
  template: `<button>{{ label }}</button>`,
})
export class CustomAction {
  label = 'Action';
}

@Component({
  selector: 'app-custom-card',
  template: `
    <app-custom-action label="Save"></app-custom-action>
    <app-custom-action label="Cancel"></app-custom-action>
  `,
})
export class CustomCard {
  actions = viewChildren(CustomAction);

  getActionLabels() {
    return this.actions().map(action => action.label);
  }
}

Dans cet exemple, le viewChildren() la fonction interroge toutes les instances du CustomAction composant et récupérer leurs étiquettes.

Alors que les requêtes de vue accèdent aux éléments du propre modèle d’un composant, Requêtes de contenu autoriser un composant à accéder projeté contenu : éléments ou composants qui y sont transmis à partir du composant parent. Vous pouvez en savoir plus sur les requêtes de contenu dans la documentation suivante :Référencement des enfants du composant avec des requêtes | Requêtes de contenu.

Conclure

Comprendre les propriétés d’entrée, les événements de sortie et les requêtes de vue est essentiel pour une communication efficace entre les composants dans les applications angulaires. Les entrées permettent aux données de circuler dans les composants, les sorties permettent aux composants d’émettre des événements vers les composants parents et les requêtes de vue fournissent un moyen d’accéder et d’interagir avec les éléments ou composants enfants dans le propre modèle d’un composant.

En tirant parti de ces fonctionnalités, nous pouvons créer des applications angulaires riches, interactives et bien structurées favorisant une architecture de composants propre et un flux de données transparent. Pour plus d’informations sur ces sujets, assurez-vous de consulter les ressources suivantes :