Обработка событий — важнейший аспект разработки приложений на TypeScript и Angular. Это позволяет вам эффективно реагировать на взаимодействие с пользователем или системные события. В этой статье мы рассмотрим различные методы обработки событий в TypeScript и Angular, а также приведем примеры кода, иллюстрирующие их использование.

1. Привязка событий шаблона.
   Angular предоставляет удобный способ обработки событий непосредственно в шаблоне с помощью привязки событий. Вы можете привязать обработчики событий к событиям DOM, таким как клики, ввод и т. д. Вот пример:

<button (click)="handleButtonClick()">Click me</button>

handleButtonClick(): void {
  console.log('Button clicked!');
}

1. Привязка событий компонента:
   Вы можете создавать собственные события в компонентах Angular и отправлять их для взаимодействия между дочерними и родительскими компонентами. Вот пример:

// Child Component
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `
    <button (click)="emitCustomEvent()">Click me</button>
  `
})
export class ChildComponent {
  @Output() customEvent = new EventEmitter<void>();
  emitCustomEvent(): void {
    this.customEvent.emit();
  }
}
// Parent Component
import { Component } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: `
    <app-child (customEvent)="handleCustomEvent()"></app-child>
  `
})
export class ParentComponent {
  handleCustomEvent(): void {
    console.log('Custom event emitted!');
  }
}

1. Прослушиватель хоста:
   Декоратор @HostListenerв Angular позволяет вам прослушивать события непосредственно в элементе хоста компонента. Вот пример:

import { Component, HostListener } from '@angular/core';
@Component({
  selector: 'app-host-listener-example',
  template: `...`
})
export class HostListenerExampleComponent {
  @HostListener('document:keydown', ['$event'])
  handleKeyDown(event: KeyboardEvent): void {
    console.log('Key pressed:', event.key);
  }
}

1. Наблюдаемые RxJS:
   Angular использует наблюдаемые RxJS для асинхронной обработки событий. Вы можете подписаться на события и реагировать соответствующим образом. Вот пример:

import { Component } from '@angular/core';
import { fromEvent } from 'rxjs';
@Component({
  selector: 'app-rxjs-example',
  template: `...`
})
export class RxJSExampleComponent {
  constructor() {
    fromEvent(document, 'click').subscribe(() => {
      console.log('Document clicked!');
    });
  }
}

В этой статье мы рассмотрели несколько методов обработки событий в TypeScript и Angular. Мы рассмотрели привязку событий шаблона, привязку событий компонента, декоратор @HostListenerи наблюдаемые RxJS. Используя эти методы, вы можете создавать интерактивные и адаптивные приложения в Angular. Поэкспериментируйте с этими методами в своих проектах и ​​выберите тот, который лучше всего соответствует вашим требованиям.