Обработка Angular 2 событий через $event

Этот урок покажет нам преимущества использования Angular 2 синтаксиса для обработки событий. А так же получение доступа к объекту события, через знакомый нам из angularjs синтаксис $event.

Если нам нужно получить, например, событие MouseEvent, мы можем использовать $event синтаксис. Тот же, который мы использовали в Angular 1. Объект события просто передается через эту переменную.

simple.form.component.ts

@Component({
  selector: 'app-simple-form',
  template: `<div>
<input #myInput type="text">
<button (click)="onClick($event)">Нажми меня!</button>
</div>`,
  styles: []
})
export class SimpleFormComponent implements OnInit {
  onClick(value) {
    console.log(value);
  }
  constructor() { }
  ngOnInit() {
  }
}

Теперь передадим значение реального MouseEvent. Когда мы будем нажимать на кнопку, мы будем иметь доступ к событию MouseEvent со всеми параметрами и свойствами.

После этого события, мы можем передать дополнительный параметр myInput.value и таким же образом получить доступ к значению в нашем обработчике. Это легко можно проверить. Выведем значение в консоль.

simple.form.component.ts

@Component({
  selector: 'app-simple-form',
  template: `<div>
<input #myInput type="text">
<button (click)="onClick($event, myInput.value)">Нажми меня!</button>
</div>`,
  styles: []
})
export class SimpleFormComponent implements OnInit {
  onClick(event, value) {
    console.log(event);
    console.log(value);
  }
  constructor() { }
  ngOnInit() {
  }
}

Таким образом после ввода текста в поле ввода и нажатия на кнопку, мы имеем доступ и к событию, и к значению элемента input.

Это работает со всеми DOM событиями. К примеру, если заменить click на mouseover для onClick обработчика. Сохранить файл. То каждый раз при наведении курсора на кнопку button, мы увидим, что обработчик срабатывает.