html - Bootstrap 对话框 esc 键不起作用

Question

这是我的对话框，但 esc 键不起作用，你知道哪里出了问题吗？

<div *ngIf="visible" class="overlay">
    <div role="dialog" class="overlay-content" tabindex="-1">
        <div class="modal-dialog" [ngClass]="{'wide-modal-dialog': wideContent}" >
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header" *ngIf="header.length > 0">
                    <button type="button" class="close" (click)="close()" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">{{ header }}</h4>
                </div>
                <div class="modal-body">
                    <ng-content></ng-content>
                </div>
                <div class="modal-footer footer-buttons">
                    <button type="button" class="btn btn-default" [disabled]="positiveDisabled" (click)="confirm()">{{ positiveBtnLabel }}</button>
                    <button type="button" class="btn btn-default" (click)="close()">{{ negativeBtnLabel }}</button>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

我不确定为什么它不起作用，但你可以在指令中设置一个监听器:

@Directive({
    selector: '[onEsc]'
})
export class ClickOutsideDirective {
    constructor(private elementRef: ElementRef) {
    }

    @Output()
    onEsc = new EventEmitter<Event>();

    @HostListener('window:keydown', ['$event'])
    onKeyDown(event: KeyboardEvent): void {
        if (event.keyCode === 27) {
            this.onEsc.emit(event);
        }
    }
}

在组件中:

.... (onEsc)=close()....