Причуда с модальным ng2-bootstrap в Angular2 rc5

Я работал над созданием приложения-календаря с использованием 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>

person Isahiro    schedule 22.08.2016    source источник
comment
Поддержка rc5 скоро появится   -  person Adrian Fâciu    schedule 23.08.2016


Ответы (1)


Мое решение для устранения проблемы заключалось в том, чтобы вставить ChangeDetectorRef в родительский компонент и вызвать this.cd.detectChanges () после того, как событие сработает при перетаскивании. Это заставляет виртуальную DOM понимать, что событие имеет новые значения, и соответственно обновляет отображение.

person Isahiro    schedule 23.08.2016