Обработка событий¶

Пользователь всегда взаимодействует с интерфейсом приложения: наводит курсор на элементы, кликает мышкой по элементам web-страницы, нажимает клавиши. Это в свою очередь инициирует возникновение соответствующих событий.

В Angular все события можно отследить и обработать, привязав к ним вызов метода класса.

1

<button (click)="showContacts()">Show Contacts List</button>

Здесь нажатие мышкой кнопки с надписью "Show Contacts List" инициирует вызов метода showContacts().

Название события всегда должно быть заключено в круглые скобки или предваряться префиксом on-.

1
2
3

<button on-click="showContacts()">
    Show Contacts List
</button>

Каждое возникающее событие передает о себе всю информацию в объекте $event, который может быть передан методу класса в качестве аргумента.

1
2
3

<button on-click="showContacts($event)">
    Show Contacts List
</button>

Свойства объекта $event:

• target — элемент DOM, выступивший инициатором;
• target.value — значение элемента DOM (справедливо для полей формы);
• keyCode — код клавиши (справедливо для keyup).

1
2
3
4
5
6
7

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

@Component({
    selector: 'contacts',
    template: `
        <contacts-item
            (saveContactPerson)="catchCustomEvent($event)"
        ></contacts-item>
    `,
})
export class ContactsComponent {
    catchCustomEvent(ev): void {
        console.log(ev);
    }
}

contacts-item.component.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

@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.

1
2
3

@Output() saveContactPerson = new EventEmitter<String>();

(saveContactPerson) = "catchCustomEvent($event)"

Свойства с декораторами @Input() и @Output() подробно рассмотрены здесь.

Комментарии