Keyboard pagination

Ezt is egyszerűen megvalósíthatod a HostListener segítségével. A már létező closeOnEscape metódusod mellé hozz létre egy másik metódust, amely a jobb és bal nyilak lenyomását figyeli és ennek megfelelően lépteti a képeket.

1. Metódus hozzáadása a jobb és bal nyil lenyomásának kezelésére:

@HostListener('document:keydown', ['$event'])
handleKeyboardEvent(event: KeyboardEvent): void {
  if (!this.selectedImage) {
    return; // Ne léptessen, ha a lightbox nincs nyitva
  }

  switch (event.key) {
    case 'Escape':
      this.selectedImage = null;
      this.selectedIndex = null;
      break;
    case 'ArrowRight':
      this.nextImage();
      break;
    case 'ArrowLeft':
      this.prevImage();
      break;
  }
}

Ezzel a kóddal most az “esc”, a jobb nyíl és a bal nyíl billentyű lenyomását is észleled. Az “esc” lenyomására bezárja a lightboxot, a jobb nyílra a következő képre lép, míg a bal nyílra az előző képre.

A closeOnEscape metódust most már nem kell külön használni, mivel a funkcionalitását áthelyezted az új handleKeyboardEvent metódusba. A léptetési metódusok (nextImage és prevImage) változatlanok maradnak.

A kód most már figyeli a billentyűzet jobb és bal nyilainak lenyomását és lépteti a képeket a lightboxban ezek alapján.