Angular 2事件處理和自定義事件

我目前正在開發一個項目，該項目涉及在Angular 2中爲應用程序團隊創建一個組件庫。我最近創建了一個模式組件，但我遇到了一些可訪問性問題。具體而言，我希望模式在用戶選擇ESC鍵時關閉，但如果存在應使用ESC事件的內部組件（如下拉菜單），則不會。由於模式結構允許通過<ng-content>顯示各種內容，這使得情況更加困難，因爲我無法保證模態內部會出現什麼內容。Angular 2事件處理和自定義事件

理想情況下，我想找到一種方法來查看投影組件是在偵聽(keydown)或(keyup)事件，還是更好，找到一種方法來查看另一個組件是否已經使用或處理了該事件。我知道，如果我正在編寫應用程序而不是提供庫，那麼我可以向投影組件中的事件添加屬性，或者按照here所述創建自定義事件處理程序，但我不幸沒有這些選項。

來源

2016-10-10 dh_washburn

如何使用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> 
...

來源

2016-10-10 19:06:52 penghui

Angular 2事件處理和自定義事件

回答

相關問題