【実践解説】Angular 2 HostListener で「escape」キー押下を検知してモーダルダイアログを閉じる

Angular 2 HostListener で "escape" キーを押下を検知する方法

このチュートリアルでは、Angular 2 の HostListener を使って "escape" キーを押下したことを検知する方法を説明します。

手順

1. コンポーネントに HostListener を定義する

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="text" (keyup)="onKeyUp($event)">
    </div>
  `,
})
export class AppComponent {
  onKeyUp(event: KeyboardEvent) {
    if (event.key === 'Escape') {
      console.log('Escape key pressed!');
    }
  }
}

このコードでは、my-app というコンポーネントに HostListener を定義しています。この HostListener は、keyup イベントを検知し、onKeyUp メソッドを呼び出します。

1. onKeyUp メソッドで "escape" キーを押下したことを確認する

onKeyUp(event: KeyboardEvent) {
  if (event.key === 'Escape') {
    console.log('Escape key pressed!');
  }
}

この onKeyUp メソッドは、event.key プロパティを使って "escape" キーが押下されたかどうかを確認します。もし "escape" キーが押下された場合は、コンソールに "Escape key pressed!" と出力します。

• HostListener は、コンポーネントのテンプレートに定義された要素だけでなく、コンポーネント自体にもイベントリスナーを定義することができます。

例

上記のコードは、input 要素にフォーカスが当たっているときに "escape" キーを押下すると、コンソールに "Escape key pressed!" と出力します。

応用例

• モーダルダイアログを閉じる
• 検索バーからフォーカスを外す
• ショートカットキーを実装する

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <button (click)="openModal()">Open Modal</button>
      <div id="modal" class="modal">
        <div class="modal-content">
          <span (click)="closeModal()">Close</span>
          <p>This is a modal dialog.</p>
        </div>
      </div>
    </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  showModal = false;

  ngOnInit() {
    document.addEventListener('keyup', (event: KeyboardEvent) => {
      if (event.key === 'Escape' && this.showModal) {
        this.closeModal();
      }
    });
  }

  openModal() {
    this.showModal = true;
  }

  closeModal() {
    this.showModal = false;
  }
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

このコードでは、以下の処理が行われます。

1. openModal メソッドでモーダルダイアログを開きます。
2. ngOnInit メソッドで HostListener を定義し、"escape" キーが押下されたときに closeModal メソッドを呼び出します。

使い方

このコードを app.component.ts ファイルに保存し、以下のコマンドを実行してコンパイルおよび実行します。

ng serve

ブラウザで http://localhost:4200 にアクセスすると、以下の画面が表示されます。

"Open Modal" ボタンをクリックすると、モーダルダイアログが開きます。モーダルダイアログが開いているときに "escape" キーを押すと、モーダルダイアログが閉じます。

• モーダルダイアログのスタイルは、app.component.css ファイルでカスタマイズできます。

@Component({
  selector: 'my-app',
  template: `
    <input type="text" (keydown.escape)="onEscapeKeydown()">
  `,
})
export class AppComponent {
  onEscapeKeydown() {
    console.log('Escape key pressed!');
  }
}

このコードでは、input 要素に (keydown.escape) イベントバインディングを定義しています。このイベントバインディングは、input 要素で "escape" キーが押下されたときに onEscapeKeydown メソッドを呼び出します。

keydown イベントリスナー

@Component({
  selector: 'my-app',
  template: `
    <input type="text" (keydown)="onKeydown($event)">
  `,
})
export class AppComponent {
  onKeydown(event: KeyboardEvent) {
    if (event.key === 'Escape') {
      console.log('Escape key pressed!');
    }
  }
}

このコードは、input 要素に (keydown) イベントリスナーを定義しています。このイベントリスナーは、input 要素でキーが押下されたときに onKeydown メソッドを呼び出します。onKeydown メソッドは、event.key プロパティを使って "escape" キーが押下されたかどうかを確認します。

サービスを使用する

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class KeyboardService {
  private keydownSubject = new Subject<KeyboardEvent>();

  constructor() {
    document.addEventListener('keydown', (event: KeyboardEvent) => {
      this.keydownSubject.next(event);
    });
  }

  get keydownEvents() {
    return this.keydownSubject.asObservable();
  }
}

@Component({
  selector: 'my-app',
  template: `
    <input type="text">
  `,
})
export class AppComponent {
  constructor(private keyboardService: KeyboardService) {
    this.keyboardService.keydownEvents.subscribe((event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        console.log('Escape key pressed!');
      }
    });
  }
}

このコードでは、KeyboardService というサービスを作成し、keydown イベントを購読できるようにしています。AppComponent コンポーネントは、KeyboardService を注入し、keydownEvents プロパティに購読します。keydownEvents プロパティは、KeyboardEvent オブジェクトの Observable です。AppComponent コンポーネントは、keydownEvents Observable に購読し、"escape" キーが押下されたときにコンソールにメッセージを出力します。

どの方法を選択するべきか

どの方法を選択するかは、状況によって異なります。

• シンプルで直感的な方法 を求めている場合は、@keydown.escape イベントバインディングを使用するのが良いでしょう。
• より柔軟な方法 を求めている場合は、keydown イベントリスナーまたはサービスを使用するのが良いでしょう。