在Angular2中使用ng2-bootstrap模式的怪癖rc5

我一直在使用Angular2構建日曆應用程序，最近我升級到了rc5。我的日曆允許用戶通過使用細節模式創建/編輯約會細節，然後顯示更改並提示用戶確認其他模式的更改。它還允許用戶拖放事件並相應地計算新的日期/時間。在升級到rc5之前，該應用程序工作正常。自升級以來，當用戶將一個事件拖動到新的時間時，確認模式打開並顯示最後一次更改，並且只有當用戶在模式內單擊時，它纔會更新以反映新的更改。在Angular2中使用ng2-bootstrap模式的怪癖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>

來源

2016-08-22 Isahiro

[支持rc5]（https://github.com/valor-software/ng2-bootstrap/pull/864）正在開發中 –

我的解決方案來解決這個問題是在ChangeDetectorRef拉入父組件，並調用this.cd.detectChanges（）一次事件觸發的拖放。這會導致虛擬DOM意識到該事件具有新值並相應地更新顯示。

來源

2016-08-23 16:45:56 Isahiro

在Angular2中使用ng2-bootstrap模式的怪癖rc5

回答

相關問題