ng2-bootstrap modal in Angular2 rc5

Question

私は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問題を解決するために私のソリューションは、親コンポーネントにChangeDetectorRefに引き、ドラッグ＆ドロップでイベントが発生一度this.cd.detectChanges（）を呼び出すようにした

<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

。これにより、仮想DOMはイベントに新しい値があり、それに応じてディスプレイを更新することを認識します。