使用 runOutsideAngular 方法时模糊事件处理程序不工作 (Angular 2+)

Question

我正在使用这个 Tiny Date Picker library to implement a range datepicker, I am using the NgZone, to run it outside the angular, using the runOutsideAngular() 方法，现在我想实现一个模糊事件处理程序，这样当我在日历外部单击时，选择器会关闭，但 angular 不会触发该功能当 div 变得模糊时，因为它没有检测到运行在 angular 之外的任何变化，对此有什么想法吗？

我的html

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

我的老师

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+)

blur event handler not working when using runOutsideAngular method (Angular 2+)

javascript

blur

angular

ngzone

angular6