Обработчик события размытия не работает при использовании метода 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();
});
}
});