javascript - Angular 2 事件处理和自定义事件

Question

我目前正在开发一个项目，该项目涉及在 Angular 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>
...