角2のイベントハンドリングとカスタムイベント

Question

私は現在、アプリケーションチームが使用するために角度2でコンポーネントのライブラリを作成するプロジェクトに取り組んでいます。私は最近モーダルコンポーネントを作成しましたが、いくつかのアクセシビリティ上の問題があります。具体的には、ユーザーがESCキーを選択したときにはモーダルを閉じるが、ESCイベントを消費するドロップダウンなどの内部コンポーネントがない場合は必要です。 <ng-content>でさまざまなコンテンツを表示できるモーダル構造では、モーダルの内部に何が含まれるかを保証できないため、状況がさらに困難になります。

投影されたコンポーネントが(keydown)イベントまたは(keyup)イベントをリッスンしているかどうかを確認する方法を見つけたい場合は、別のコンポーネントがイベントを既に消費しているかどうかを確認する方法を見つけることができます。ライブラリを提供するのではなくアプリケーションを書く場合、投影されたコンポーネント内のイベントに属性を追加するか、hereというカスタムイベントハンドラを作成することができますが、残念ながらそれらのオプションはありません。

Answer 1

RxJSの使用についてはどうですか？あなたのコンポーネントで：

isShowModal: boolean = false; 
private keyup$ = Observable.fromEvent(document, "keyup"); 
private keyupSubcribe: any; 

ngOnInit() { 
    this.keyupSubscribe = this.keyup$.subscribe((e: KeyboardEvent) => { 
     if(this.isShowModal && e.keyCode === 27) { 
      this.isShowModal = false; 
     } 
    }); 
} 

ngOnDestroy() { 
    this.keyupSubscribe.unsubscribe(); 
} 

onShowModal() { 
    this.isShowModal = true; 
} 

そして、あなたのテンプレートで：

... 
<button (click)="onShowModal($event)">Show Modal</button> 
... 
<your-modal *ngIf="isShowModal"></your-modal> 
...