Привет, Хабр! Представляю вашему вниманию перевод статьи «Understanding @Input, @Output and EventEmitter in Angular» автора foolishneo.
Приветствую всех желающих накапливать информацию о тонкостях работы фреймворка Angular.
Сегодня посчитал нужным лучше изучить информацию, касающуюся организации взаимодействия между компонентами Angular и начать практиковать переводы интересующих меня статей с английского.
Надеюсь найдутся те, для кого перевод статьи с Medium будет полезен.
Давно имея желание начать переводить полезные статьи с английского, решил начать с простенькой, весьма не объемной, но возможно, дополняющей имеющиеся знания статейки. К Вашему вниманию, господа…
Для тех, кто новенький в изучении Angular, декораторы Input и Output могут вызывать смущение, особенно, когда Вы пытаетесь разобраться в их назначении с помощью примеров кода. В этой статье, я попытаюсь объяснить их максимально простым способом.
В первую очередь, задача декораторов Input и Output состоит в обмене данными между компонентами. Они являются механизмом для получения/отправки данных от одного компонента к другому.
Input используется для получения данных, в то время как Output для их отправки. Output отправляет данные выставляя их в качестве производителей событий, обычно как объекты класса EventEmitter.
Таким образом, когда Вы видите код, на подобии этого:
он значит:
Давайте представим что у Вас есть компонент TodoList, который содержит компонент TodoItem.
В шаблоне компонентаTodoList Вы ожидаете увидеть:
что значит:
Хватит теории. Давайте посмотрим на пример.
Обратите внимание на пример.
Здесь я создал 2 компонента, компонент hello, вложенный в компонент app. Компонент hello имеет Input и Output:
Компонент hello ожидает получить значение типа «строка» и поместить его в качестве значения свойства myFriend.
Каждый раз, когда Вы кликните на него, свойство отправки данных onClick декоратора Output передаст «внешнему миру» строку с содержанием «Neo».
Ниже расположен код компонента app:
Обратите внимание что компонент app использует тег компонента hello в своем шаблоне, который совершает 2 действия:
Вы можете увидеть приложение в действии здесь.
Приветствую всех желающих накапливать информацию о тонкостях работы фреймворка 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)">
Вы можете увидеть приложение в действии здесь.