Question

我正在使用这个Tiny Date Picker库来实现范围日期选择器，我正在使用NgZone，通过runOutsideAngular()方法在角度范围之外运行它，现在我想实现一个模糊事件处理程序，以便当我在压延机外部单击时，选择器关闭，但是当div模糊时，角度不会触发该功能，因为它不在角度范围内运行时未检测到任何变化，对此有什么想法吗？

我的html

  <div type="text" class="sp-datepicker-input" tabindex="1" (blur)='closeDatePicker()' [class.sp-datepicker-inputopen]="modalRangeOpen">
     <div class="sp-datepicker-calendar"></div>
  </div>

我的ts。

ngAfterViewInit() {
this.zone.runOutsideAngular(() => {
  const input = document.querySelector('sp-datepicker .sp-datepicker-input');
  let eventType = 'select';
  if (this.range) {
    this.datePicker = DateRangePicker(input, {
      startOpts: this.options,
      endOpts: this.to_options
    });
    eventType = 'statechange';
  } else {
    this.datePicker = TinyDatePicker(input, this.options);
  }
  this.datePicker.on(eventType, (_, picker) => {
    let date = picker.state.selectedDate;

    if (this.range) {
      date = {
        start: picker.state.start,
        end: picker.state.end
      };
    }
    // here i am using the .run() method to capture the values,
    this.zone.run(() => {
      this.start_value = date.start;
      this.end_value = date.end;
      this.onChange(date);
    });
    return date;
  });
});
}
   closeDatePicker() {
    this.modalRangeOpen = false;
   }

Answer 1

此替代方法可以解决问题

      body.addEventListener('click', event => {
       let isDatepicker = false;
       event['path'].forEach(item => {
        if (item.nodeName === 'SP-DATEPICKER') {
         isDatepicker = true;
        }
       });

      if (!isDatepicker) {
        this.zone.run(() => {
          this.closeDatePicker();
        });
      }
     });

使用runOutsideAngular方法（Angular 2+）时，模糊事件处理程序不起作用

1 个答案: