Apprendre Angular en vidéos, ça te tente?
Les événements dans vos composants Angular 2+ avec EventEmitter et @Output

Les événements dans vos composants Angular 2+ avec EventEmitter et @Output

Les composants Angular ont un moyen pour notifier leurs composants parent que quelque chose à changer, via les événements.

Cet article va couvrir le fonctionnement des événements au sein d’un composant stateless en utilisant EventEmitter et le décorateur @Output. Nous allons apprendre à émettre un changement ou n’importe quel custom event à partir d’un composant custom dans Angular.

Binding d’un composant stateful

Dans l’article précédent, nous avons configurer le décorateur @Input pour faire entrer des données dans un composant enfant, nous pouvons faire la même chose pour écouter dans le parent quand une valeur change à l’intérieur du composant enfant.

Pour faire ceci, nous allons réutiliser notre composant parent qui utilisait notre composant enfant <counter>.

 

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

@Component({
  selector: 'app-root',
  template: `<div class="app">Parent: {{ myCount }}</div>

` }) export class AppComponent { myCount: number = 10; countChange(event) { } }

 

Nous avons fait quelques ajouts :

  • Changer initialCount pour myCount, l’état du compteur va être managé dans le parent, une fois que le composant enfant l’aura changé.
  • Nous avons créé une propriété custom change pour le template <counter>. Nous avons utilisé la syntaxe de binding d’event : ().
  • Connecter la propriété myCount dans le parent.
  • Ajouter une méthode countChange pour la classe, et nous l’avons passé dans l’event listener (change)

Cette configuration permet de finaliser le flux uni-directionnel pour le flux de données. Le flux de données pour la classe AppComponent, dans le <counter>, Le compteur peut changer les valeurs. Une fois la valeur changée, nous nous attendons à ce que countChange() soit appelé.

 

Décorateur @Output

Comme pour l’utilisation de Input, nous pouvons importer Output et décorer la propriété change dans notre CounterComponent :

 

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

@Component({...})
export class CounterComponent {

  @Input()
  count: number = 0;

  @Output()
  change;

  // ...

}

 

Ceci va configurer la propriété change, pour dire à Angular que cette propriété doit être traité comme un output. Maintenant nous avons besoin d’appeler quelque chose que nous appelons EventEmitter.

EventEmitter

C’est la partie la plus intéressante. Pour pouvoir utiliser notre Output, nous avons besoin d’importer et de binder une nouvelle instance d’EventEmitter :

 

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

@Component({...})
export class CounterComponent {

  // ...

  @Output()
  change = new EventEmitter();

  // ...

}

 

En utilisant TypeScript, nous pouvons dire que notre change ouput est de type EventEmitter. Dans notre cas nous allons émettre un type number :

 

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

@Component({...})
export class CounterComponent {

  // ...

  @Output()
  change: EventEmitter = new EventEmitter();

  // ...

}

 

Invoquer l’instance EventEmitter

En résumer, nous avons créé une propriété change, et lié une nouvelle instance de EventEmitter.

Nous pouvons maintenant simplement appelé la méthode this.change . Nous pouvons appeler .emit() pour émettre notre événement à notre composant parent.

 

@Component({...})
export class CounterComponent {

  @Input()
  count: number = 0;

  @Output()
  change: EventEmitter = new EventEmitter();

  increment() {
    this.count++;
    this.change.emit(this.count);
  }

  decrement() {
    this.count--;
    this.change.emit(this.count);
  }

}

 

Ceci va émettre un changement pour notre (change) listener que nous avons configurer dans le parent. Il va appeler la fonction callback countChange($event), et la donnée associée à notre événement va être transmises par la propriété $event.

 

L’affectation d’un callback stateful

Ici, nous voulons réaffecter this.myCount avec event que nous avons passé en paramètre.

 

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

@Component({
  selector: 'app-root',
  template: `
<div class="app">Parent: {{ myCount }}</div>
` }) export class AppComponent { myCount: number = 10; countChange(event) { this.myCount = event; } }

 

Pourquoi faire ça? Pour créer un flux de données uni-directionnel. La donnée vient de AppComponent, puis dans va dans <counter>, Le compteur change la valeur et émet le changement au parent. Enfin le parent retransmet la modification de data à l’enfant.

Et voilà, vous savez tous sur les événements dans vos composants Angular 2

Partagez, si vous aimez

Laisser un commentaire

Specify Facebook App ID and Secret in Super Socializer > Social Login section in admin panel for Facebook Login to work

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *