Обработка событий¶
Пользователь всегда взаимодействует с интерфейсом приложения: наводит курсор на элементы, кликает мышкой по элементам web-страницы, нажимает клавиши. Это в свою очередь инициирует возникновение соответствующих событий.
В Angular все события можно отследить и обработать, привязав к ним вызов метода класса.
<button (click)="showContacts()">Show Contacts List</button>
Здесь нажатие мышкой кнопки с надписью "Show Contacts List" инициирует вызов метода showContacts()
.
Название события всегда должно быть заключено в круглые скобки или предваряться префиксом on-
.
<button on-click="showContacts()">
Show Contacts List
</button>
Каждое возникающее событие передает о себе всю информацию в объекте $event
, который может быть передан методу класса в качестве аргумента.
<button on-click="showContacts($event)">
Show Contacts List
</button>
Свойства объекта $event
:
target
- элемент DOM, выступивший инициатором;target.value
- значение элемента DOM (справедливо для полей формы);keyCode
- код клавиши (справедливо для keyup).
Перечисленные выше свойства имеются только у стандартных событий браузера. Angular события рассмотрены дальше в этой главе.
export class AppComponent {
showContacts(ev): void {
console.log(ev.target)
console.log(ev.target.value) //в данном случае undefined
console.log(ev.keyCode) //в данном случае undefined
}
}
Наиболее распространенные события:
click
- нажатие кнопки мыши;mouseenter/mouseleave
- наведение/уход курсора мыши на/с элемента;change
- изменение состояние элемента, применяется к полям формы;focus
- элемента получает фокус, т.е. становится активным;blur
- потеря элементом фокуса;keyup
- возникает, когда отпускается нажатая клавиша.
Для удобства в Angular предусмотрено так называемое псевдо событие keyup.{keyCode}
, которое будет инициировано только в том случае, если будет нажата определенная клавиша. Например, для отслеживания нажатия Enter используется keyup.enter
.
Пользовательские Angular события¶
Часто в сложных приложениях стандартных событий бывает недостаточно и разработчикам приходится реализовывать собственные. За этот функционал отвечает класс EventEmitter
.
Разберем на примере двух компонентов: ContactsComponent
и ContactsItemComponent
.
contacts.component.ts
@Component({
selector: 'contacts',
template: `
<contacts-item
(saveContactPerson)="catchCustomEvent($event)"
></contacts-item>
`,
})
export class ContactsComponent {
catchCustomEvent(ev): void {
console.log(ev)
}
}
contacts-item.component.ts
@Component({
selector: 'contacts-item',
template: `
<button (click)="showContactPerson()">Show</button>
`,
})
export class ContactsItemComponent {
contactPerson = 'Peter'
@Output() saveContactPerson = new EventEmitter<String>()
showContactPerson(): void {
this.saveContactPerson.emit(this.contactPerson)
}
}
Компонент ContactsItemComponent
входит в состав ContactsComponent
. Необходимо в момент нажатия кнопки в contacts-item
выполнять функцию в contacts
.
Для этого в компоненте contacts-item
создается свойство saveContactPerson
, которое является экземпляром класса EventEmitter
. При создании указывается тип данных, которые будут передаваться событием.
Далее в функции, вызываемой в contacts-item
в момент нажатия кнопки, инициируем возникновение события с помощью метода emit()
класса EventEmitter
, который принимает передаваемые данные.
В app-root
имеется метод catchCustomEvent()
, который принимает объект $event
и вызывается в ответ на возникновение события saveContactPerson
.
Обратите внимание, что название события совпадает с именем свойства, которое является экземпляром класса EventEmitter
.
@Output() saveContactPerson = new EventEmitter<String>();
(saveContactPerson) = "catchCustomEvent($event)"
Свойства с декораторами @Input()
и @Output()
подробно рассмотрены здесь.
В пользовательских Angular событиях объект $event
содержит значение, переданное методу emit()
.