在 Angular4 应用程序中创建自己的日期选择器答案

【问题标题】：Creating own datepicker in Angular4 application在 Angular4 应用程序中创建自己的日期选择器
【发布时间】：2017-11-30 18:27:55
【问题描述】：

我正在创建自己的日期选择器，但遇到了一个问题。我有一个名为 toggleShowCalendar() 的函数，当用户单击日历图标时我调用它。此函数使 div 在页面上可见。

当用户想要关闭日期选择器时会出现问题。用户必须再次单击日历图标，这有点令人困惑。

<img src="calendar.jpg" (click)="toggleShowCalendar()"/>    
<div *ngIf="calendarVisible" class="calendar">Here is my own calendar</div>

  toggleShowCalendar() {
      this.calendarVisible= !this.calendarVisible;
  }

如何允许点击 div 外的任意位置，关闭 datepicker？

【问题讨论】：

你需要找到一个地方把函数'fn'放在你的角度为document.body.addEventListener('click', fn, true);
以上代码注册了页面任意位置的点击事件
christianliebel.com/2016/05/…

标签： javascript html css angular typescript

【解决方案1】：

这可能会有所帮助

// in the component class
displayDiv = false;

// in the component's constructor
document.body.addEventListener('click', () => {
  if (this.displayDiv) {
    this.displayDiv = false;
  }
}

<div [hidden]="!displayDiv">
  Div content here
</div>

【讨论】：