Angular ngModel Hooks - eckig, ngx-bootstrap

Gibt es eine Möglichkeit, einen Haken in den Prozess zu haben?Einrichten / Abrufen und Objekt zu einer Unterkomponente über den Eingang ngModel. Was ich versuche zu tun, ist eine Instanzvariable, die ich an eine Komponente eines Drittanbieters weitergebe, aber bevor ich diesen Wert an die Unterkomponente übergeben, möchte ich sie mutieren. Ich möchte sie auch mutieren, wenn die Unterkomponente sie ändert lange bevor es die übergeordnete Komponente erreicht. Mein Anwendungsfall hierfür ist der ngx Timepicker (https://valor-software.com/ngx-bootstrap/#/timepicker). Der Timepicker akzeptiert eine Date Objekt aber zeigt die Werte im lokalenZeitzone. Ich dachte, wenn es eine Möglichkeit gibt, den an die Timepicker-Komponente übergebenen Wert abzufangen, könnte ich den Wert in UTC "fälschen", so dass die korrekten Werte im Steuerelement angezeigt werden, und dann "fixieren", wenn die Komponente versucht, sie zu speichern zurück zum Modell. Ich bin auch offen für Ideen, wie man dies auf andere Weise tun kann.

Beispiel: <timepicker [(ngModel)]="mytime"></timepicker>

In diesem Fall myTime ist 03-09-2018 15:20 EST, aber ich möchte, dass die Steuerung 20.20 Uhr anzeigt.

Antworten:

Die Syntax [(ngModel)]="mytime" ist Kurzschrift für [ngModel]="mytime" (ngModelChange)="mytime = $event". Wenn Sie die Vor- / Nachbearbeitung durchführen möchten, können Sie sie aufteilen und Methoden ausführen, um das zu verarbeiten, was Sie benötigen.

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

Mit den Updates für Ihren Komponentencode Folgendes:

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

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

Abhängig von der von Ihnen eingerichteten Änderungserkennung kann es problematisch sein, die preProcessTime Methode. Es ist möglicherweise besser, beide Versionen der Zeit beizubehalten und sie bei Bedarf sofort durch Code zu ändern. Ich habe nicht genug Details, um zu sagen, wie oft das der Fall ist preProcessTime Methode wird aufgerufen, nur als allgemeine Anmerkung.