Ymmärtäminen @Input, @Output ja EventEmitter Angularissa

BY admin
|

Neille, jotka ovat uusia Angularissa, Input- ja Output-dekoraattorit ovat hieman hämmentäviä, varsinkin kun niitä tutkii esimerkkikoodia katsomalla. Tässä artikkelissa yritän selittää ne yksinkertaisimmin.

Työkalu tietojen vaihtoon

Ensin Inputin ja Outputin ideana on vaihtaa tietoja komponenttien välillä. Ne ovat mekanismi, jolla voidaan lähettää/vastaanottaa dataa komponentilta toiselle.

Inputia käytetään vastaanottamaan dataa sisään, kun taas Outputia käytetään lähettämään dataa ulos. Output lähettää dataa ulos paljastamalla tapahtumatuottajia, yleensä EventEmitter-objekteja.

Silloin kun näet tällaista koodia

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

sehän tarkoittaa

  • hei, odotan, että minulle lähetetään dataa. Otan sen vastaan ja tallennan sen item-ominaisuuteeni
  • Sivumennen sanottuna tuotan ja lähetän datan ulos onChange-ominaisuuden kautta.

Asetaan, että sinulla on TodoList-komponentti, joka sisältää TodoItem-komponentin. TodoList-mallissa sinun odotetaan näkevän

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

mikä tarkoittaa

  • TodoList laittaa data-arvot myTask-ominaisuuteensa ja välittää ne TodoItem-ominaisuuteen
  • TodoItem-ominaisuudesta lähtevä data vastaanotetaan ja käsitellään TodoList-ominaisuudessa olevalla handleChange()-funktiolla

Se siitä teoriasta. Katsotaanpa esimerkkiä.

@Input ja @Output toiminnassa

Katso tämä esimerkki. Tässä olen luonut 2 komponenttia, hello-komponentti on sisäkkäin app-komponentin sisällä. Hello-komponentilla on Input ja Output

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

Se odottaa saavansa merkkijonon arvon ja tallentaa sen myFriend-ominaisuuteen.

@Input() myFriend: string

Joka kerta kun sitä klikataan, Output-ominaisuus onClick lähettää merkkijonon ’Neo’ ulkomaailmaan.

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

Alhaalla on sovelluskomponentti

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>

Huomaa, että sovelluskomponentti käyttää mallissaan hello-tagia ja tekee kaksi asiaa:

  • lähettää merkkijonoarvon ’Angular’ hello:lle sen ng-ominaisuuden kautta
<hello myFriend="{{ ng }}"
  • vastaanottaa hello:lta lähetetyn arvon ja käsittelee sitä upCase()-funktiolla
<hello myFriend="{{ ng }}" (onClick)="upCase($event)">

Voit nähdä sovelluksen toiminnassa tästä

.