Înțelegerea @Input, @Output și EventEmitter în Angular

BY admin
|

Pentru cei care sunt noi în Angular, decoratorii Input și Output sunt un pic confuzi, mai ales când îi studiezi uitându-te la codul de exemplu. În acest articol, voi încerca să le explic în cel mai simplu mod.

Un instrument pentru a face schimb de date

În primul rând, ideea de Input și Output este de a face schimb de date între componente. Ele reprezintă un mecanism de trimitere/recepție a datelor de la o componentă la alta.

Input este utilizat pentru a primi date în timp ce Output este utilizat pentru a trimite date în exterior. Output trimite date în exterior prin expunerea producătorilor de evenimente, de obicei obiecte EventEmitter.

Așa că atunci când vedeți un cod ca acesta

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

aceasta înseamnă

  • hei, aștept să mi se trimită date. Le voi primi și le voi stoca în proprietatea mea item
  • de altfel, voi produce și voi trimite date prin intermediul proprietății onChange.

Să spunem că aveți o componentă TodoList care conține o componentă TodoItem. În șablonul TodoList, este de așteptat să vedeți

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

ceea ce înseamnă

  • TodoList pune valori de date în proprietatea sa myTask și le transmite către TodoItem
  • datele emise de TodoItem vor fi primite și gestionate de funcția handleChange() din TodoList

Asta e tot pentru teorie. Să ne uităm la exemplu.

@Input și @Output în acțiune

Vezi acest exemplu. Aici am creat 2 componente, componenta hello imbricate în componenta app. Componenta hello are o intrare și o ieșire

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

Se așteaptă să primească o valoare de tip șir de caractere și o stochează în proprietatea myFriend. 

@Input() myFriend: string

De fiecare dată când faceți clic pe ea, proprietatea Output onClick va emite un șir de caractere ‘Neo’ către lumea exterioară.

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

Mai jos este componenta de aplicație

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>

Rețineți că componenta de aplicație folosește tag-ul hello în șablonul său și face două lucruri:

  • pasează o valoare de șir de caractere ‘Angular’ către hello prin intermediul proprietății sale ng
<hello myFriend="{{ ng }}"
  • recepe valoarea emisă de hello și procesează această valoare prin funcția upCase()
<hello myFriend="{{ ng }}" (onClick)="upCase($event)">

Puteți vedea aplicația în acțiune aici

.