Comprendre @Input, @Output et EventEmitter en Angular

BY admin
|

Pour ceux qui sont nouveaux dans Angular, les décorateurs Input et Output sont un peu confus, surtout lorsque vous les étudiez en regardant le code d’exemple. Dans cet article, je vais essayer de les expliquer de la manière la plus simple.

Un outil pour échanger des données

Tout d’abord, l’idée d’Input et Output est d’échanger des données entre les composants. Ils sont un mécanisme pour envoyer/recevoir des données d’un composant à un autre.

L’entrée est utilisée pour recevoir des données en entrée alors que la sortie est utilisée pour envoyer des données en sortie. Output envoie des données en exposant des producteurs d’événements, généralement des objets EventEmitter.

Donc, quand vous voyez un code comme celui-ci

@Component({
selector: 'todo-item',
...
})export class TodoItemComponent {
@Input() item
@Output() onChange = new EventEmitter()
}

cela signifie

  • hey, je m’attends à ce que des données me soient envoyées. Je vais les recevoir et les stocker dans ma propriété item
  • par ailleurs, je vais produire et envoyer des données via la propriété onChange.

Disons que vous avez un composant TodoList qui contient le composant TodoItem. Dans le modèle TodoList, vous êtes censé voir

...
<todo-item
="myTask"
(onChange)="handleChange($event)"
</todo-item>
...

ce qui signifie

  • TodoList met des valeurs de données dans sa propriété myTask et les passe à TodoItem
  • les données émises par TodoItem seront reçues et traitées par la fonction handleChange() dans TodoList

C’est tout pour la théorie. Regardons l’exemple.

@Input et @Output en action

Voyez cet exemple. Ici, j’ai créé 2 composants, le composant hello imbriqué dans le composant app. Le composant hello a une entrée et une sortie

hello.component.ts
@Component({
selector: 'hello',
template: `
<h3 (click)="onClick.emit('Neo')">
...
</h3>
`
})export class HelloComponent {
@Input() myFriend: string
@Output() onClick = new EventEmitter()
}

Il s’attend à recevoir une valeur de chaîne de caractères et la stocke dans la propriété myFriend.

@Input() myFriend: string

Chaque fois que vous cliquez dessus, la propriété Output onClick émettra une chaîne de caractères ‘Neo’ vers le monde extérieur.

<h3 (click)="onClick.emit('Neo')">

Vous trouverez ci-dessous le composant app

app.component.ts
export class AppComponent {
ng = 'Angular'
myName = 'Neo' upCase(st:string): void { ... }
}app.component.html
<hello myFriend="{{ ng }}" (onClick)="upCase($event)"></hello>
<h3>My name is {{ myName }}</h3>

Notez que le composant app utilise la balise hello dans son modèle et fait deux choses :

  • passer une valeur de chaîne ‘Angular’ à hello via sa propriété ng
<hello myFriend="{{ ng }}"
  • recevoir la valeur émise par hello et traiter cette valeur par la fonction upCase()
<hello myFriend="{{ ng }}" (onClick)="upCase($event)">

Vous pouvez voir l’app en action ici

.