Angular2 rc5 中 ng2-bootstrap 模态的怪癖

Question

我一直致力于使用 Angular2 构建日历应用程序，最近升级到 rc5。我的日历允许用户通过使用详细信息模式 create/edit 约会详细信息，然后显示更改并提示用户在另一个模式中确认更改。它还允许用户拖放事件并相应地计算新的 date/time。该应用程序在升级到 rc5 之前运行良好。自升级以来，当用户将事件拖动到新时间时，确认模式将打开并显示上次更改，并且只有当用户在模式内单击时，它才会更新以反映新的更改。

预期流量： drag/drop -> 更新值 -> 打开显示以显示新的更改

当前流量： drag/drop -> 打开显示 -> （在模式中单击）更改值以反映新的事件时间

我没有更改我的代码，所以我怀疑 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>

Answer 1

我解决此问题的方法是将 ChangeDetectorRef 拉入父组件，并在拖放事件触发后调用 this.cd.detectChanges()。这会导致虚拟 DOM 意识到该事件具有新值并相应地更新显示。

Angular2 rc5 中 ng2-bootstrap 模态的怪癖

Quirk with ng2-bootstrap modal in Angular2 rc5

ng2-bootstrap

angular