Я работал над созданием приложения-календаря с использованием Angular2, и недавно я обновился до rc5. Мой календарь позволяет пользователям создавать / редактировать детали встреч с помощью модального окна подробностей, затем отображает изменения и предлагает пользователю подтвердить изменения в другом модальном окне. Это также позволяет пользователю перетаскивать события и соответственно вычислять новую дату / время. Приложение работало нормально до обновления до rc5. После обновления, когда пользователь перетаскивает событие в новое время, открывается модальное окно подтверждения и показывает последнее изменение, и только когда пользователь щелкает внутри модального окна, оно обновляется, чтобы отразить новые изменения.
Ожидаемый поток: перетащите / отпустите -> обновите значения -> откройте дисплей, чтобы отобразить новые изменения
Текущий поток: перетащите / отпустите -> откройте дисплей -> (При нажатии в модальном режиме) измените значения, чтобы отразить время нового события
Я не менял свой код, поэтому подозреваю, что есть некоторые изменения в том, как rc5 обрабатывает модальное окно. Я использую "ng2-bootstrap", и поток редактирования деталей по-прежнему работает как обычно.
viewProviders: [BS_VIEW_PROVIDERS] директивы: [MODAL_DIRECTIVES]
Обработчик перетаскивания:
confirmEvent(response) {
this.changeEvent = this.calendarService.getEvent(this.events, response.existingEvent);
this.event = response.newEvent;
this.confirmAction = response.action;
this.eventService.getEventParticipants(this.changeEvent);
this.appointmentConfirmComponent.show();
}
Подробный обработчик ответа:
handleDetailsResponse(response) {
this.changeEvent = this.calendarService.getEvent(this.events, response.event);
this.eventService.getEventParticipants(this.changeEvent);
this.event = response.event;
this.appointmentDetailComponent.hide();
switch (response.action) {
case 'delete':
if(this.changeEvent.id && this.changeEvent.id !== '') {
this.confirmAction = 'delete';
this.appointmentConfirmComponent.show();
}
break;
case 'save':
if (this.event.id && this.event.id !== '') {
this.confirmAction = 'update';
} else {
this.confirmAction = 'save';
}
this.appointmentConfirmComponent.show();
break;
default:
this.confirmAction = 'ERROR';
this.updateSources();
break;
}
}
При необходимости я могу принудительно вызвать событие в модальном окне, чтобы заставить его обновить, но это кажется неряшливым. Есть ли чистый способ принудительно обновить модальное окно?
calendar.component.html
<div class="row" style="margin-top: 1rem;">
<div class="card col-xs-8 col-xs-offset-1 flex" style="padding-top: 1rem;">
<calendar-body class="flex-content"
[calendarEvents]='events'
(editEvent)='editEvent($event)' (confirmEvent)='confirmEvent($event)'>
</calendar-body>
</div>
<appointment-detail [event]="event" (submitDetails)="handleDetailsResponse($event)"></appointment-detail>
<appointment-confirm [existingEvent]="changeEvent" [newEvent]="event" [action]="confirmAction" (submitConfirmation)="handleConfirmResponse($event)"></appointment-confirm>
</div>