A @Input, @Output és EventEmitter megértése Angularban

BY admin
|

Azoknak, akik még újak Angularban, az Input és Output dekorátorok kissé zavarosak, különösen, ha példakódok alapján tanulmányozzuk őket. Ebben a cikkben megpróbálom a legegyszerűbben elmagyarázni őket.

Egy eszköz az adatcseréhez

Először is, az Input és Output lényege, hogy adatokat cseréljünk a komponensek között. Ezek egy olyan mechanizmus, amellyel adatokat küldhetünk/fogadhatunk egyik komponensből a másikba.

A bemenet az adatok beérkezésére szolgál, míg a kimenet az adatok kiküldésére. Az Output adatokat küld ki az eseménytermelők, általában EventEmitter objektumok exponálásával.

Így amikor ilyen kódot látsz

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

az azt jelenti

  • hé, azt várom, hogy adatokat küldjenek nekem. Fogadom és tárolom az item tulajdonságomban
  • mellesleg az onChange tulajdonságon keresztül fogom előállítani és kiküldeni az adatokat.

Tegyük fel, hogy van egy TodoList komponensed, amely TodoItem komponenst tartalmaz. A TodoList sablonban várhatóan

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

ez azt jelenti, hogy

  • A TodoList adatértékeket tesz a myTask tulajdonságába és átadja a TodoItem
  • A TodoItem által kibocsátott adatokat a TodoList

handleChange() függvénye fogadja és kezeli

Ez az elmélet ennyi. Nézzük meg a példát.

@Input és @Output működésben

Nézzük meg ezt a példát. Itt 2 komponenst hoztam létre, a hello komponenst az app komponensbe ágyazva. A hello komponensnek van egy Input és egy Output

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

Egy string értéket vár, és azt a myFriend tulajdonságban tárolja.

@Input() myFriend: string

Minden alkalommal, amikor rákattintunk, az Output tulajdonság onClick egy ‘Neo’ stringet bocsát ki a külvilág felé.

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

Az alábbiakban az alkalmazáskomponens

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>

Megjegyezzük, hogy az alkalmazáskomponens a hello taget használja a sablonjában, és két dolgot csinál:

  • egy ‘Angular’ string értéket ad át a hello számára az ng tulajdonságon keresztül
<hello myFriend="{{ ng }}"
  • megkapja a hello által kibocsátott értéket, és azt az upCase() függvénnyel feldolgozza
<hello myFriend="{{ ng }}" (onClick)="upCase($event)">

Az alkalmazás itt látható működés közben

.