【问题标题】:Angular 2: ngx-popover close by hitting ESC keyAngular 2:通过按 ESC 键关闭 ngx-popover
【发布时间】:2017-07-06 17:02:18
【问题描述】:

我在组件中引用了这个 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>

请帮帮我

【问题讨论】:

    标签: html angular angular2-template popover


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

    然后在弹出元素上:*ngIf="popoverVisible"

    【讨论】:

    • 谢谢..它工作,但即使我的按钮被禁用,我只希望弹出框需要关闭..
    • *ngIf 在 DOM 中添加/删除元素。您需要将其放置在要删除或显示的任何元素中。如果弹出框是一个元素(按钮和工具提示对话框),您可以使用带有:host /deep/ .container-element name-of-the-tooltip-selector { visibility:hidden; } 的 CSS 来隐藏它(虽然不要从 DOM 中删除,但这对您来说应该足够好了)。然后你在容器元素上做[ngClass]="{'container-element': popoverVisible}"
    • 仍然按钮元素正在通过弹出框关闭,我已经分享了我的代码,请验证...
    • 在您想要在关闭时隐藏的标签中使用 *ngIf="myPopover2"。所以在你的情况下 我猜
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-02-28
    • 1970-01-01
    • 2017-01-03
    相关资源
    最近更新 更多