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

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();
        });
      }
     });