Pochopení @Input, @Output a EventEmitter v Angularu

BY admin
|

Pro ty, kteří s Angularem teprve začínají, jsou dekorátory Input a Output poněkud matoucí, zejména pokud je studujete při pohledu na ukázkový kód. V tomto článku se je pokusím co nejjednodušeji vysvětlit.

Nástroj pro výměnu dat

Především je myšlenkou dekorátorů Input a Output výměna dat mezi komponentami. Jsou mechanismem pro odesílání/přijímání dat z jedné komponenty do druhé.

Input slouží k přijímání dat dovnitř, zatímco Output slouží k odesílání dat ven. Output posílá data ven vystavením producentů událostí, obvykle objektů EventEmitter.

Takže když vidíte kód jako tento

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

tak to znamená

  • hele, očekávám, že mi budou poslána data. Přijmu je a uložím do své vlastnosti item
  • mimochodem, data vytvořím a odešlu prostřednictvím vlastnosti onChange.

Řekněme, že máte komponentu TodoList, která obsahuje komponentu TodoItem. V šabloně TodoList byste měli vidět

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

což znamená, že

  • TodoList vloží hodnoty dat do své vlastnosti myTask a předá je TodoItem
  • data vyslaná z TodoItem budou přijata a zpracována funkcí handleChange() v TodoList

Tolik k teorii. Pojďme se podívat na příklad.

@Input a @Output v akci

Podívejte se na tento příklad. Zde jsem vytvořil 2 komponenty, komponentu hello vnořenou uvnitř komponenty app. Komponenta hello má Input a Output

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

Očekává, že obdrží řetězcovou hodnotu a uloží ji do vlastnosti myFriend.

@Input() myFriend: string

Při každém kliknutí na ni bude vlastnost Output onClick vysílat do vnějšího světa řetězec ‚Neo‘.

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

Níže je komponenta aplikace

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>

Všimněte si, že komponenta aplikace používá ve své šabloně značku hello a provádí dvě věci:

  • předává řetězcovou hodnotu ‚Angular‘ do hello prostřednictvím své vlastnosti ng
<hello myFriend="{{ ng }}"
  • přijímá emitovanou hodnotu z hello a zpracovává tuto hodnotu pomocí funkce upCase()
<hello myFriend="{{ ng }}" (onClick)="upCase($event)">

Aplikaci můžete vidět v akci zde