Understanding @Input, @Output and EventEmitter in Angular

BY admin
|

Dla tych, którzy są nowi w Angularze, dekoratory Input i Output są trochę zagmatwane, szczególnie gdy uczysz się ich patrząc na przykładowy kod. W tym artykule postaram się wyjaśnić je w najprostszy sposób.

Narzędzie do wymiany danych

Po pierwsze, ideą Input i Output jest wymiana danych pomiędzy komponentami. Są one mechanizmem do wysyłania/odbierania danych z jednego komponentu do drugiego.

Input jest używany do odbierania danych w, podczas gdy Output jest używany do wysyłania danych na zewnątrz. Wyjście wysyła dane poprzez eksponowanie producentów zdarzeń, zwykle obiektów EventEmitter.

Więc kiedy widzisz kod taki jak ten

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

to znaczy

  • hej, oczekuję, że dane zostaną wysłane do mnie. Odbiorę je i przechowam w mojej właściwości item
  • przy okazji, będę produkował i wysyłał dane poprzez właściwość onChange.

Powiedzmy, że masz komponent TodoList, który zawiera komponent TodoItem. W szablonie TodoList spodziewamy się zobaczyć

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

co oznacza

  • TodoList umieszcza wartości danych w swojej właściwości myTask i przekazuje je do TodoItem
  • dane emitowane z TodoItem zostaną odebrane i obsłużone przez funkcję handleChange() w TodoList

To tyle jeśli chodzi o teorię. Spójrzmy na przykład.

@Input i @Output w akcji

Sprawdź ten przykład. Stworzyłem tutaj 2 komponenty, komponent hello zagnieżdżony wewnątrz komponentu app. Komponent hello ma wejście i wyjście

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

Oczekuje, że otrzyma wartość łańcuchową i przechowuje ją we właściwości myFriend.

@Input() myFriend: string

Za każdym razem, gdy na niego klikniesz, właściwość wyjściowa onClick wyemituje ciąg 'Neo’ do świata zewnętrznego.

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

Poniżej znajduje się komponent aplikacji

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>

Zauważ, że komponent aplikacji używa znacznika hello w swoim szablonie i robi dwie rzeczy:

  • przekazanie wartości łańcuchowej 'Angular’ do hello poprzez jego właściwość ng
<hello myFriend="{{ ng }}"
  • odebranie emitowanej wartości z hello i przetworzenie tej wartości przez funkcję upCase()
<hello myFriend="{{ ng }}" (onClick)="upCase($event)">

Możesz zobaczyć aplikację w akcji tutaj

.