Angular ngModel钩子

Question

有没有办法通过ngModel输入设置/检索和反对子组件的过程。我要做的是有一个实例变量，我传递给第三方组件，但在我将该值传递给子组件之前，我想要改变它。当子组件在到达父组件之前改变它时，我也想改变它。我的用例是ngx Timepicker（https://valor-software.com/ngx-bootstrap/#/timepicker）。 Timepicker接受Date对象，但会在本地时区显示值。我在想是否有办法拦截传递给Timepicker组件的值我可以“捏”到UTC的值，以便在控件中显示正确的值，然后在组件尝试保存它们时“修复”回到模特。我也对如何以另一种方式做到这一点有所了解。

实施例： <timepicker [(ngModel)]="mytime"></timepicker>

在这种情况下，myTime是美国东部时间03-09-2018美国东部时间下午3:20，但我希望控件显示在晚上8:20。

Answer 1

语法[(ngModel)]="mytime"是[ngModel]="mytime" (ngModelChange)="mytime = $event"的简写。如果你想进行前/后处理，可以将它拆开并运行方法来处理你需要的东西。

<timepicker [ngModel]="preProcessTime(mytime)"
    (ngModelChange)="postProcessTime($event)"></timepicker>

对组件代码的更新如下：

preProcessTime(time: Date): Date {
    // return corrected date object
}

postProcessTime(newTime: Date) {
    // process new time and store as mytime
}

根据您设置的更改检测，使用preProcessTime方法可能不好。保持两个版本的时间可能会更好，在需要时立即更改代码。我没有足够的细节来说明调用preProcessTime方法的频率，只是将其作为一般说明。