Bonjour, Habr! Je vous présente la traduction de l'article
"Comprendre @Input, @Output et EventEmitter en angulaire" par foolishneo.
Salutations à tous ceux qui souhaitent accumuler des informations sur les subtilités du cadre angulaire.
Aujourd'hui, j'ai pensé qu'il était nécessaire de mieux étudier les informations concernant l'organisation de l'interaction entre les composants angulaires et de commencer à pratiquer la traduction d'articles qui m'intéressent depuis l'anglais.
J'espère qu'il y a ceux pour qui la traduction de l'article de
Medium sera utile.
Ayant depuis longtemps le désir de commencer à traduire des articles utiles de l'anglais, j'ai décidé de commencer par un simple, peu volumineux, mais complétant éventuellement les connaissances existantes de l'article. À votre attention, messieurs ...
Pour ceux qui ne connaissent pas Angular, les décorateurs d'
entrée et de
sortie peuvent être gênants, surtout lorsque vous essayez de comprendre leur objectif avec des exemples de code. Dans cet article, je vais essayer de les expliquer de la manière la plus simple possible.
Outil d'échange de données
Tout d'abord, la tâche des décorateurs d'
entrée et de
sortie est d'échanger des données entre les composants. Ils sont un mécanisme pour recevoir / envoyer des données d'un composant à un autre.
L'entrée est utilisée pour recevoir des données, tandis que la
sortie est utilisée pour les envoyer.
La sortie envoie des données en les exposant en tant que producteurs d'événements, généralement en tant qu'objets de la classe
EventEmitter.Ainsi, lorsque vous voyez le code, à l'image de ceci:
@Component({ selector: 'todo-item', ... }) export class TodoItemComponent { @Input() item @Output() onChange = new EventEmitter() }
il veut dire:
- Hé, j'attends les données qui me sont envoyées. Je les obtiendrai et les enregistrerai comme valeur de la propriété de l' article.
- Soit dit en passant, je serai la raison de l'envoi de données à l'aide de la propriété onChange.
Disons que vous avez un composant
TodoList qui contient un composant
TodoItem .
Dans le modèle de composant
TodoLis t, vous vous attendez à voir:
... <todo-item [item]="myTask" (onChange)="handleChange($event)" </todo-item> ...
qu'est-ce que cela signifie:
- Le composant TodoList place la valeur des données dans sa propriété myTask et la transmet au composant TodoItem
- Les données transférées du composant TodoItem seront reçues et traitées par la fonction handleChange () du composant TodoList
Assez de théorie. Regardons un exemple.
@Input et Output en action.
Faites attention à
un 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() }
Le composant
hello s'attend à obtenir une valeur de chaîne et à la placer comme valeur de la propriété
myFriend .
@Input() myFriend: string
Chaque fois que vous cliquez dessus, la propriété d'envoi de données
onClick du décorateur de
sortie transmet au «monde extérieur» une chaîne avec le contenu de «Neo».
<h3 (click)="onClick.emit('Neo')">
Voici le code du composant de l'
application :
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 d'
application utilise la balise de composant
hello dans son modèle, qui effectue 2 actions:
- transmet la valeur de la chaîne 'Angular' au composant hello en utilisant la propriété ng
- et reçoit la valeur envoyée du composant hello et traite la valeur reçue à l'aide de la fonction upCase ():
<hello myFriend="{{ ng }}" (onClick)="upCase($event)">
Vous pouvez voir l'application en action
ici.