Angular - 5.7-Attribution d'un alias aux événements personnalisés
Dans la leçon précédente, nous avons découvert @Output et
EventEmitter pour permettre à nos composants d'émettre des événements
personnalisés. Tout comme @Input, @Output accepte un
alias pour exposer à l'extérieur un nom d'événement différent du nom
interne. Pratique pour publier une API de composant claire et stable sans toucher au
code interne.
Renommer un événement émis
Reprenons notre événement blueprintCreated. On préférerait l'exposer sous
un nom plus court depuis l'extérieur : bpCreated. Comme pour
@Input, on passe le nom externe en argument au décorateur :
@Output('bpCreated') blueprintCreated = new EventEmitter<{ bpName: string; bpContent: string }>();
- côté parent, on n'écoute plus
(blueprintCreated)mais(bpCreated)="onBlueprintAdded($event)"; - côté enfant, le code TypeScript continue d'utiliser
this.blueprintCreated.emit(...)sans changement ; - l'ancien nom
blueprintCreatedn'est plus exposé à l'extérieur — seulbpCreatedpeut être écouté.
Tout le reste reste en place et fonctionne exactement comme avant : l'alias ne fait
que renommer le canal d'écoute publique. C'est le même mécanisme que pour
@Input, simplement appliqué à un événement sortant.