Обработчик события размытия не работает при использовании метода runOutsideAngular (Angular 2+)

Я использую эту библиотеку Tiny Date Picker для реализации DatePicker диапазона, я использую NgZone, чтобы запустить его за пределами угла, используя метод 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;
   }

0 ответов

Этот обходной путь сделал свое дело

      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();
        });
      }
     });
Другие вопросы по тегам