Привет, Хабр! Представляю вашему вниманию перевод статьи «Понимание @Input, @Output и EventEmitter в Angular» автор: Foolishneo. Приветствую всех, кто хочет накопить информацию о тонкостях фреймворка Angular. Сегодня я посчитал необходимым лучше изучить информацию, касающуюся организации взаимодействия между компонентами Angular, и начать практиковаться в переводах интересующих меня статей с английского.
Надеюсь, найдутся те, для кого перевод статьи с Середина будет полезно.
Давно имея желание заняться переводом полезных статей с английского, я решил начать с простой статьи, не очень объемной, но, возможно, дополняющей имеющиеся у меня знания.
Вашему вниманию, господа.
Для тех, кто только начинает изучать Angular, декораторы Вход И Выход может сбить с толку, особенно когда вы пытаетесь понять их назначение с помощью примеров кода.
В этой статье я постараюсь объяснить их максимально простым способом.
Инструмент обмена данными
Прежде всего задача декораторов Вход И Выход состоит из обмена данными между компонентами.Они представляют собой механизм получения/отправки данных от одного компонента к другому.
Вход используется для получения данных, пока Выход чтобы отправить их.
Выход отправляет данные, раскрывая их как производителей событий, обычно как объекты класса EventEmitter. Итак, когда вы видите такой код:
это значит:@Component({ selector: 'todo-item', .}) export class TodoItemComponent { @Input() item @Output() onChange = new EventEmitter() }
- Эth, я жду отправленных мне данных.
Я получу их и сохраню как стоимость недвижимости.
элемент.
- Кстати, я вызову отправку данных с помощью свойства по изменению.
В шаблоне компонента ТодоЛис Вы ожидаете увидеть: .
<todo-item [item]="myTask" (onChange)="handleChange($event)" </todo-item> .
Что значит:
- Компонент Список дел помещает значение данных в принадлежащее ему свойство мое задание и передает его компоненту TodoItem
- Данные, передаваемые из компонента TodoItem , будет получен и обработан функцией дескрипторИзменить() компонент Список дел
Давайте посмотрим на пример.
@Ввод и
Выход В бою.обрати внимание на пример.
Здесь я создал 2 компонента, компонент привет , вложенный в компонент приложение .
Компонент привет В нем есть Вход И Выход : hello.component.ts
@Component({
selector: 'hello',
template: `
<h3 (click)="onClick.emit('Neo')">
.
</h3>
`
})
export class HelloComponent {
@Input() myFriend: string
@Output() onClick = new EventEmitter()
}
Компонент привет ожидает получить значение типа «строка» и поместить его как значение свойства мой друг .
@Input() myFriend: string
Каждый раз, когда вы нажимаете на него, свойство отправки данных по щелчку декоратор Выход передаст во «внешний мир» строку, содержащую «Нео».
<h3 (click)="onClick.emit('Neo')">
Ниже приведен код компонента приложение : 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>
Обратите внимание, что компонент приложение использует тег компонента привет в своем шаблоне, который выполняет 2 действия:
- передает строковое значение «Угловой» компонент привет использование собственности нг
- и получает отправленное значение от компонента hello и обрабатывает полученное значение с помощью функции upCase():
<hello myFriend="{{ ng }}" (onClick)="upCase($event)">
Вы можете увидеть приложение в действии Здесь.
Теги: #typescript #angular #input #@Output()
-
Боль
19 Oct, 24 -
5 Сервисов Для «Шпионажа» Конкурентов
19 Oct, 24 -
Я Мечтаю О Ms Excel
19 Oct, 24 -
Мотивация Идеей
19 Oct, 24 -
Неизвестная История Теслы, Часть 2/3
19 Oct, 24 -
Поисковые Системы Помогают Своим Хозяевам
19 Oct, 24 -
В Объятиях Питона (Только Для Женщин)
19 Oct, 24 -
Parse.com Снижает Цены
19 Oct, 24
