Appearance
Utiliser @Output pour communiquer avec un composant parent ​
Voici une structure simple pour comprendre comment communiquer entre un composant enfant et un composant parent:
plaintext
app
├── count
│ ├── count.component.ts
└── app.component.ts
Dans notre composant, nous souhaitons effectuer un événement. Par exemple, quand l'utilisateur clique sur un bouton, un compteur s'incrémente.
ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-count',
standalone: true,
template: `
<p>{{n}}</p>
<button (click)="up()"></button>
`
})
export class CountComponent {
n = 0;
up() {
this.n++;
}
}
Nous mettons des parenthèses autour du nom de l'événement pour indiquer une valeur de sortie.
Mais comment envoyer cette valeur Ă un composant parent, c'est Ă dire le composant app
?
Nous devons utiliser le décorateur @Output
et EventEmitter
pour émettre un événement:
ts
import {Component, EventEmitter, Output} from '@angular/core';
@Component({
selector: 'app-count',
standalone: true,
template: `
<p>{{n}}</p>
<button (click)="up()">Up</button>
`
})
export class CountComponent {
n = 0;
@Output() numberChange: EventEmitter<number> = new EventEmitter();
up() {
this.n++;
this.numberChange.emit(this.n);
}
}
Deux importations :
EventEmitter
: Emettre l'événement aux composants parents@Output
: Décorateur indiquant la propriété envoyant l'information.
Retenir facilement
@Output
est utilisé pour envoyer des informations à un composant parent. De cette manière, vous avez accès à un nouvel attribut HTML numberChange
dans le template du composant parent. Vous pouvez ensuite écouter les changements de cet attribut car il est un événement.
La propriété numberChange
est donc utilisé dans le template pour recevoir l'événement :
ts
import { Component } from '@angular/core';
import { CountComponent } from './count/count.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [CountComponent],
template: `
<div>
<app-count (numberChange)="multiplicate($event)" />
{{result}}
</div>
`
})
export class AppComponent {
result = 0;
multiplicate(val: number) {
this.result = val * 2;
}
}
- Dans le template du composant parent, nous utilisons
(numberChange)="multiplicate($event)"
pour écouter les changements de la propriéténumberChange
du composant enfant. - Nous utilisons
$event
pour récupérer la valeur envoyée par le composant enfant.
$event ?
$event
est une variable spéciale qui contient la valeur envoyée par le composant enfant. Son type est défini par le type de l'EventEmitter
dans le composant enfant.