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()....