ng2-bootstrap datepicker div 正在按按钮创建.如果用户在 div 外部单击，如何隐藏它

Question

我在注册为新用户时使用ng2-datepicker来获取用户的出生日期。 由于要求是将其作为弹出窗口，因此我在div中设置了日期选择器，每当用户单击按钮时都会呈现。 日期选取器模板如下所示：

<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 应用程序中设置某种事件处理程序，当弹出窗口显示时，如果单击弹出窗口以外的任何内容，该事件处理程序将隐藏弹出窗口。

Answer 1

这

对我来说是工作：

坦普尔特.html

<div class="col-md-9" #datepickerE> <input type="text" class="form-control" (focus)="isShowDatepicker = true"> <div class="popover-datepicker" *ngIf="isShowDatepicker"> <datepicker formControlName="shippingDate" [minDate]="currentDate" [showWeeks]="true" [dateDisabled]="dateDisabled" (selectionDone)="isShowDatepicker = false"></datepicker> </div>

组件.ts

@Component({

selector: 'my-form',

host: {

'(document:click)': 'onClick($event)',

},

templateUrl: './templete.html',

})

export class MaterialForm implements OnInit {

@ViewChild("datepickerE") datepickerE: ElementRef;

public isShowDatepicker: boolean = false;

onClick(event) {

if (!this.datepickerE.nativeElement.contains(event.target)) {

this.isShowDatepicker = false;

}

}

}