Вопрос:

Причуда с модальной загрузкой ng2 в Angular2 RC5

angular ng2-bootstrap

364 просмотра

1 ответ

115 Репутация автора

Я работал над созданием приложения календаря, используя 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>
Автор: Isahiro Источник Размещён: 22.08.2016 09:41

Ответы (1)


0 плюса

115 Репутация автора

Решение

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

Автор: Isahiro Размещён: 23.08.2016 04:45
Вопросы из категории :
32x32