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