Testez vos composants Angular avec ces exemples de test unit

Interaction entre composants Angular : Partage de données et événements

L’interaction entre les composants est un aspect essentiel de l’utilisation d’Angular. Les composants peuvent partager des données entre eux, ainsi que communiquer entre eux via des événements. Dans cette article, nous allons explorer différentes façons d’interagir entre les composants.

2.4 Nesting de composants

Avant de passer à la partie suivante, il est important de comprendre comment les composants s’emboîtent (nesting). Les composants Angular peuvent être utilisés comme des éléments HTML dans d’autres composants. Par exemple, si vous avez un composant qui affiche un message :

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

@Component({
  selector: 'app-required',
  template: `{{name}} est requis.`,
})
export class RequiredComponent {
  @Input()
  public name: string = '';
}

Vous pouvez l’utiliser comme élément dans un autre composant :

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

@Component({
  selector: 'app-sample',
  template: `
    <input type="text" name="heroName" />
    <app-required name="Nom de l'héros"></app-required>
  `,
})
export class SampleComponent {
}

3.1 Passage de données du parent au child avec binding d’entrée

Les composants peuvent partager des données entre eux en utilisant le binding d’entrée (input binding). Les composants enfants peuvent avoir des propriétés qui sont liées à des valeurs provenant du parent.

import { Component, Input } from '@angular/core';
import { Hero } from './hero';

@Component({
  selector: 'hero-child',
  template: `
    <h3>{{hero.name}} dit :</h3>
    <p>J', {{hero.name}}, suis à votre service, {{masterName}}.</p>
  `,
})
export class HeroChildComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

Intercepter les changements des propriétés d’entrée avec un accesseur

Les composants peuvent également intercepter les changements des propriétés d’entrée en utilisant un accesseur (setter). Par exemple, vous pouvez tronquer l’espace blanc dans une chaîne de caractères.

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

@Component({
  selector: 'name-child',
  template: '<h3>"{{name}}"</h3>',
})
export class NameChildComponent {
  private _name = '';
  @Input()
  set name(name: string) {
    this._name = (name && name.trim()) || '<aucun nom défini>';
  }
  get name(): string { return this._name; }
}

4.2 Événements émis par les composants enfants

Les composants enfants peuvent émettre des événements en utilisant l’outil EventEmitter. Les composants parents peuvent alors écouter ces événements et réagir à eux.

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

@Component({
  selector: 'my-voter',
  template: `
    <h4>{{name}}</h4>
    <button (click)="vote(true)" [disabled]="voted">S'aligner</button>
    <button (click)="vote(false)" [disabled]="voted">Se désallier</button>
  `,
})
export class VoterComponent {
  @Input() name: string;
  @Output() onVoted = new EventEmitter<boolean>();
  voted = false;
  vote(agreed: boolean) {
    this.onVoted.emit(agreed);
    this.voted = true;
  }
}

4.3 Interactions entre composants via variables locales

Les composants parents ne peuvent pas utiliser le data-binding pour lire les propriétés ou appeler les méthodes des composants enfants. Cependant, vous pouvez créer une variable locale qui référence l’élément enfant et accéder à ses propriétés ou méthode.

import { Component } from '@angular/core';
import { CountdownTimerComponent } from './countdown-timer.component';

@Component({
  selector: 'countdown-parent-lv',
  template: `
    <h3>Compte à rebours vers le lancement (via variable locale)</h3>
    <button (click)="timer.start()">Démarrer</button>
    <button (click)="timer.stop()">Arrêter</button>
    <div class="seconds">{{timer.seconds}}</div>
    <countdown-timer #timer></countdown-timer>,
  `,
})
export class CountdownLocalVarParentComponent {
}

Conclusion

Dans cette article, nous avons exploré différentes façons d’interagir entre les composants en utilisant le binding d’entrée, les événements émis par les composants enfants et les variables locales. Ces techniques sont essentielles pour créer des applications complexes avec Angular.

Etapes suivantes

• Pratiquez l’utilisation du binding d’entrée pour partager des données entre les composants.
• Apprenez à utiliser les événements émis par les composants enfants pour communiquer entre les composants.
• Expérimentez l’utilisation de variables locales pour accéder aux propriétés ou méthodes des composants enfants.