Question

我在组件

中引用了这个ngx-popover

ngx-popover现在问题是如何通过按ESC键来关闭弹出窗口

这是我的代码

<div style="margin-bottom: 1em;" class="comment" *ngIf="myPopover2">
                        <popover-content #myPopover2
                                         placement="left"
                                         [animation]="true"
                                         [closeOnClickOutside]="true" [ng2-draggable]="true">
                            <button class="button_close" (click)="myPopover2.hide()">
                                <i class="fa fa-chevron-right" aria-hidden="true"></i>
                            </button>
                            <comment></comment>
                        </popover-content>
                    <button [ngClass]="{'container-element': myPopover2}" type="button" (keydown)="CloseEvent($event)" class="btn btn-labeled btn-default btn-block button_style" [popover]="myPopover2">
                        </span>
                    </button>
                </div>

请帮帮我

Answer 1

  popoverVisible: boolean = true;

  constructor(@Inject(DOCUMENT) private document) {}

  @HostListener('document:keydown', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) {
    if (event.keyCode === 27) { // 27===ESC
      this.popoverVisible = false;
    }
  }

然后在popover-element上：*ngIf="popoverVisible"

通过按ESC键关闭Angular 2：ngx-popover

1 个答案: