Angular2 rc5中ng2引导模式的怪癖
我一直在使用Angular2构建一个日历应用程序,最近我升级到了rc5。“我的日历”允许用户通过使用详细信息模式创建/编辑约会详细信息,然后显示更改并提示用户在其他模式中确认更改。它还允许用户拖放事件,并相应地计算新的日期/时间。该应用程序在升级到rc5之前运行良好。自升级以来,当用户将事件拖到新时间时,确认模式打开并显示最后一次更改,并且只有当用户在模式内单击时,它才会更新以反映新的更改 预期流量: 拖放->更新值->打开显示以显示新更改 电流: 拖放->打开显示->(在模式中单击时)更改值以反映新的事件时间 我还没有改变我的代码,所以我怀疑rc5处理模式的方式有一些改变。我使用的是“ng2引导”,细节编辑的流程仍然正常 视图提供程序:[BS_视图提供程序] 指令:[模态指令] 拖放处理程序:Angular2 rc5中ng2引导模式的怪癖,angular,ng2-bootstrap,Angular,Ng2 Bootstrap,我一直在使用Angular2构建一个日历应用程序,最近我升级到了rc5。“我的日历”允许用户通过使用详细信息模式创建/编辑约会详细信息,然后显示更改并提示用户在其他模式中确认更改。它还允许用户拖放事件,并相应地计算新的日期/时间。该应用程序在升级到rc5之前运行良好。自升级以来,当用户将事件拖到新时间时,确认模式打开并显示最后一次更改,并且只有当用户在模式内单击时,它才会更新以反映新的更改 预期流量: 拖放->更新值->打开显示以显示新更改 电流: 拖放->打开显示->(在模式中单击时)更改值以
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>
我解决此问题的方法是将ChangeDetectorRef拉入父组件,并在拖放时触发事件后调用此.cd.detectChanges()。这会使虚拟DOM意识到事件具有新的值,并相应地更新显示。解决此问题的方法是将ChangeDetectorRef拉入父组件,并在拖放时触发事件后调用此.cd.detectChanges()。这会使虚拟DOM意识到事件具有新值,并相应地更新显示。正在进行中。正在进行中