Angular 正在单击按钮创建ng2引导日期选择器div。如果用户在div之外单击，如何隐藏它？

我正在使用ng2日期选择器在注册为新用户时获取用户的出生日期。由于要求将其作为弹出窗口，因此我在

div

中设置了datepicker，每当用户单击按钮时，它就会呈现出来。以下是datepicker模板的外观：

<div style="position:absolute;z-index:9999;" *ngIf="showDatepicker">
    <datepicker name="datepicker" [(ngModel)]="dateModel" [showWeeks]="false" [maxDate]="maxDate" (selectionDone)="hidePopup($event)"></datepicker>
</div>

这非常有效，因为每当他们选择日期时，我们都会运行

hidePopup

函数，该函数设置日期并隐藏弹出窗口

然而，我们有一个新的要求，即当用户单击或关注除弹出窗口以外的任何内容时，我们需要隐藏弹出窗口

我的问题是，在angular2应用程序中，当弹出窗口显示时，如何设置某种eventhandler，如果单击弹出窗口以外的任何内容，将隐藏弹出窗口

这是我的工作：

templete.html

组件。ts

@组件（{

选择器：“我的表单”，

主机：{

”（文档：单击）“onClick（$event）”，

}，

templateUrl:'./templete.html'，

}）

导出类MaterialForm实现OnInit{

@ViewChild（“datepickerE”）datepickerE:ElementRef；

public isShowDatepicker:boolean=false；

onClick（事件）{

如果（！this.datepickerE.nativeElement.contains（event.target））{

this.isShowDatepicker=false；

}

}

}