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)"> 

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