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>
...

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

1 个答案: