javascript - 当我在 Angular 4 外部单击时，Datepicker 日期控件不会消失

Question

当我按下日期控件时，我没有输入日期，我单击 Esc ==> 日期控件不会消失我点击外部==>日期控件不会消失这是我的代码 html 和 ts :

<input class="cssInputDate" type="text" id="dateDebut" name="dateDebut"
#dateDebut="ngModel"
(keyup)="onKeyUp($event)"
(blur)="checkDateDebut()"
required [ngModel]="dateDebutModel" (ngModelChange)="dateDebChange($event)" ngbDatepicker #ddeb="ngbDatepicker" >
<button tabindex="3" (click)="ddeb.toggle(); openDatepicker(ddeb)" type="button" style="margin-left: 0;" *ngIf="modificationMode" >
<i class="fa fa-calendar" aria-hidden="true"></i>
</button>

这里是.ts:

openDatepicker(id){
        console.log(" id =",id);
        console.log(" dateDebInput =",this.dateDebInput);
        this.dynamicId = id;
      }

    onClick(event) {
        if(this.dynamicId == undefined){
          console.log("Dynamic id ===",this.dynamicId);
        }
        else if(!this._eref.nativeElement.contains(event.target)) {
            this.dateDebInput.close();    
        }
      }

这里是控制台日志输出:

有什么解决办法吗？

Answer 1

我找到了解决办法我在这里使用@HostListener代码:

@HostListener('mousedown', ['$event'])
    mouseEvent(event) {
        if(event.target.offsetParent.tagName !== 'NGB-DATEPICKER'){
            this.dateDebInput.close();
        }              
    }

与转义相同:

@HostListener('window:keyup', ['$event'])
    keyEvent(event: KeyboardEvent) {
        if (event.key === "Escape") {
            this.dateDebInput.close();
        }
    }