Uitleg van @Input, @Output en EventEmitter in Angular

BY admin
|

Voor degenen die nieuw zijn in Angular zijn de Input en Output decorators een beetje verwarrend, vooral als je ze bestudeert door naar voorbeeldcode te kijken. In dit artikel zal ik proberen ze op de eenvoudigste manier uit te leggen.

Een hulpmiddel om gegevens uit te wisselen

Op de eerste plaats is het idee van Input en Output om gegevens tussen componenten uit te wisselen. Zij zijn een mechanisme om gegevens van de ene component naar de andere te zenden/ontvangen.

Input wordt gebruikt om gegevens in te ontvangen terwijl Output wordt gebruikt om gegevens uit te zenden. Output zendt gegevens uit door het blootstellen van gebeurtenis producenten, meestal EventEmitter objecten.

Dus als je code ziet als deze

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

dat betekent

  • helaas, ik verwacht dat gegevens worden verzonden naar mij. Ik zal het ontvangen en opslaan in mijn item property
  • tussen haakjes, ik zal gegevens produceren en versturen via de onChange property.

Laten we zeggen dat je een TodoList component hebt die TodoItem component bevat. In het TodoList-sjabloon wordt

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

verwacht, wat betekent

  • TodoList zet gegevenswaarden in zijn myTask-eigenschap en geeft deze door aan TodoItem
  • gegevens die worden uitgezonden van TodoItem worden ontvangen en afgehandeld door de handleChange()-functie in TodoList

Dat is het voor de theorie. Laten we eens kijken naar het voorbeeld.

@Input en @Output in actie

Kijk eens naar dit voorbeeld. Hier heb ik 2 componenten gemaakt, hello component genest binnen de app component. De hello component heeft een Input en een Output

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

Het verwacht een string waarde te ontvangen en slaat het op in de myFriend property.

@Input() myFriend: string

Olke keer dat je er op klikt, zal de Output property onClick een string ‘Neo’ naar de buitenwereld uitzenden.

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

Hieronder staat de app component

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>

Merk op dat de app component de hello tag in zijn template gebruikt en twee dingen doet:

  • een stringwaarde ‘Angular’ doorgeven aan hello via zijn ng eigenschap
<hello myFriend="{{ ng }}"
  • de uitgezonden waarde van hello ontvangen en die waarde verwerken door de upCase() functie
<hello myFriend="{{ ng }}" (onClick)="upCase($event)">

U kunt de app hier in actie zien