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

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

0 голосов
/ 22 ноября 2018

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

1 Ответ

0 голосов
/ 02 декабря 2018

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

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