【Angular实战/网易云】模态框（二）

之前的内容我们已经简单介绍了如何生成模态框，以及用状态管理插件管理状态，并把批量的action封装成service。下面我们正式来给我们的模态框添加特性。

一. ESC键退出

简单地来说就是监听键盘上的keydown事件，如果keyCode对应的是ESC键，那就隐藏模态框。

  private createOverlay() {
    this.overlayRef = this.overlay.create();
    this.overlayRef.overlayElement.appendChild(this.elementRef.nativeElement);
    // 创建模态框的时候就开始监听
    this.overlayRef.keydownEvents().subscribe(e => this.handleKeyDownEvent(e));
  }

  private handleKeyDownEvent(evt: KeyboardEvent) {
    if (evt.keyCode === ESCAPE) {
      this.onClick();
    }
  }

另外，我们也不能一直监听，当visible为false的时候显然再监听就不合适了，所以注入OverlayKeyboardDispatcher。当visiable为true的时候add OverlayRef, 为false的时候remove OverlayRef.

  // 省略了部分代码
  private handleVisiableChange(visiable) {
    if (visiable) {
      // ....
      this.overlayKeyboardDispatcher.add(this.overlayRef);
      //