Angular. Понимание @Input, @Output и EventEmitter

Привет, Хабр! Представляю вашему вниманию перевод статьи «Understanding @Input, @Output and EventEmitter in Angular» автора foolishneo.

Приветствую всех желающих накапливать информацию о тонкостях работы фреймворка Angular.

Сегодня посчитал нужным лучше изучить информацию, касающуюся организации взаимодействия между компонентами Angular и начать практиковать переводы интересующих меня статей с английского.

Надеюсь найдутся те, для кого перевод статьи с Medium будет полезен.

Давно имея желание начать переводить полезные статьи с английского, решил начать с простенькой, весьма не объемной, но возможно, дополняющей имеющиеся знания статейки. К Вашему вниманию, господа…

Для тех, кто новенький в изучении Angular, декораторы Input и Output могут вызывать смущение, особенно, когда Вы пытаетесь разобраться в их назначении с помощью примеров кода. В этой статье, я попытаюсь объяснить их максимально простым способом.

Инструмент для обмена данными

В первую очередь, задача декораторов Input и Output состоит в обмене данными между компонентами. Они являются механизмом для получения/отправки данных от одного компонента к другому.

Input используется для получения данных, в то время как Output для их отправки. Output отправляет данные выставляя их в качестве производителей событий, обычно как объекты класса EventEmitter.

Таким образом, когда Вы видите код, на подобии этого:

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

он значит:

• Эй, я ожидаю отправленные мне данные. Я получу их и сохраню в качестве значения свойства item.
  
• Кстати, я буду причиной отправки данных с помощью свойства onChange.
  

Давайте представим что у Вас есть компонент TodoList, который содержит компонент TodoItem.
В шаблоне компонентаTodoList Вы ожидаете увидеть:

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

что значит:

• Компонент TodoList помещает значение данных в принадлежащее ему свойство myTask и передает его компоненту TodoItem
  
• Данные, переданные с компонента TodoItem, будут получены и обработаны функцией handleChange() компонента TodoList
  

Хватит теории. Давайте посмотрим на пример.

@Input и Output в действии.

Обратите внимание на пример.

Здесь я создал 2 компонента, компонент hello, вложенный в компонент app. Компонент hello имеет Input и Output:

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

Компонент hello ожидает получить значение типа «строка» и поместить его в качестве значения свойства myFriend.

@Input() myFriend: string

Каждый раз, когда Вы кликните на него, свойство отправки данных onClick декоратора Output передаст «внешнему миру» строку с содержанием «Neo».

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

Ниже расположен код компонента app:

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>

Обратите внимание что компонент app использует тег компонента hello в своем шаблоне, который совершает 2 действия:

• передает значение строки 'Angular' компоненту hello с помощью свойства ng
  
• и получает отправленное значение от компонента hello и обрабатывает полученное значение с помощью функции upCase():
  

<hello myFriend="{{ ng }}" (onClick)="upCase($event)">

Вы можете увидеть приложение в действии здесь.