HostListener

HostListener არის დეკორატორი რომელიც დეკლარაციას უკეთებს DOM-ის ივენთს, იქნება ეს ჰოსსტ ელემენტსა თუ გლობალურ window-ზე, რომელსაც გვინდა რომ მოვუსმინოთ. ეს დეკორატორი გამოიყენება კომპონენტის კლასებში, და, კომპონენტებზე ხშირად, დირექტივებში.

შევქმნათ უბრალო დირექტივი რომელზეც HostListener-ს გამოვიყენებთ.

ng g d example

import { Directive, HostListener } from "@angular/core";

@Directive({
  selector: "[appExample]",
  standalone: true,
})
export class ExampleDirective {
  constructor() {}

  @HostListener("click") onClick() {
    console.log("click detected");
  }
}

HostListener-ში პირველ არგუმენტად ვაწვდით ივენთის სახელს, ხოლო შემდეგ დეკლარაციას ფუკეთებთ ფუნქციას, რომელიც უნდა გააქტიურდეს ამ ივენთის საპასუხოდ.

ამ მაგალითში, თუ დავაკლიკებთ ელემენტზე, რომელზეც appExample დირექტივი იქნება, კონსოლში დავლოგავთ ტექსტს.

შესაძლებელია window-ზე არსებული მოვლენების მოსმენაც, ამისთვის HostListener-ში არგუმენტს ვუწერთ პრეფიქსს window:. ამ მაგალითში ჩვენ AppComponent ში enter ღილაკზე დაჭერას ვუსმენთ და საპასუხოდ კომპონენტის კლასში counter თვისებას ვზრდით, რომელსაც ინტერპოლაციით გამოვსახავთ.

import { HostListener, Component } from "@angular/core";
import { CommonModule } from "@angular/common";

@Component({
  selector: "app",
  standalone: true,
  imports: [CommonModule],
  template: ` <h1>
      Hello, you have pressed enter {{ counter }} number of times!
    </h1>
    Press enter key to increment the counter.`,
})
export class AppComponent {
  counter = 0;
  @HostListener("window:keydown.enter")
  handleKeyDown() {
    this.counter++;
  }
}

HostListener-ში მეორე არგუმენტად მასივში შეგვიძლია დავწეროთ ის, თუ რა მივაწოდოთ არგუმენტად handler მეთოდმა. მათ შორის არის $event, რომელიც ჩვენ event binding-ში უკვე გვინახავს.

  @HostListener('click', ['$event'])
  onClick(event: MouseEvent) {
    console.log(`click detected on X:${event.x}, Y: ${event.y}`);
  }

$event ამ მოვლენის შესახებ შეიცავს ინფორმაციას, რომელზეც ჩვენ ახლა onClick მეთოდის პარამეტრებში გვაქვს წვდომა. ჰენდლერ ფუნქციის პარამეტრში მას უნდა მივუთითოთ სათანადო ტიპი. ‘click’ ივენთი არის MouseEvent-ის ტიპის.

შეჯამება

ამ თავში ჩვენ განვიხილეთ HostListener დეკორატორი, რომლის საშუალებითაც შეგვიძლია ჰოსტზე ივენეთების მოსმენა და მოხელთება. პირველ არგუმენტად HostListener იღებს, ხოლო მეორე არგუმენტად ჰენდლერ ფუნქციაში გასატარებელ არგუმენტს. ასე ჩვენ ივენთზე რეაგირება და ამ ივენთში არსებული ინფორმაციის მოხელთებაც შეგვიძლია.