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

【问题标题】：Angular 2 Event Handling and Custom EventsAngular 2 事件处理和自定义事件
【发布时间】：2016-10-10 16:02:45
【问题描述】：

我目前正在开展一个项目，该项目涉及在 Angular 2 中创建一个组件库以供应用团队使用。我最近创建了一个模态组件，但我遇到了一些可访问性问题。具体来说，我希望在用户选择 ESC 键时关闭模式，但如果存在应该使用 ESC 事件的下拉菜单等内部组件则不会。由于模态结构允许通过<ng-content> 显示各种内容，这使情况变得更加困难，因为我无法保证模态内部会是什么。

理想情况下，我想找到一种方法来查看投影组件是否正在侦听 (keydown) 或 (keyup) 事件，或者更好的是，找到一种方法来查看另一个组件是否已经使用或处理了该事件。我知道如果我正在编写一个应用程序而不是提供一个库，我可以为投影组件内的事件添加一个属性，或者创建一个自定义事件处理程序，如here 所述，但不幸的是我没有这些选项。

【问题讨论】：

标签： javascript events angular typescript modal-dialog

【解决方案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>
...

【讨论】：