Angular mit RxJS reaktiv gestalten?

[AngularTool]

Als Beispiele hierzu finde ich eigentlich „nur“ TODO-Listen. Was ist aber, wenn ich Formeln und deren Auswertung und Berechnungen mit dieser Technik umsetzen will. Ich habe als Ergebnis eine Fläche aus der Kreisformel:

foo_Area (…) { ( (D*D)-(d+d) ) * Pi }

Die Eingabewerte sind: D: Außendurchmesser, d: Innendurchmesser, s: Wandstärke

Wobei:

D_ds (…) {D= d + 2*s}

d_Ds (…) {d=D – 2*s}

s_Dd (…) {s=(D-d)/s}

In der Eingabemaske kann über einen Radiobutton festgelegt werden, welcher der drei Werte fix ist. Wenn nun z.B. die Wandstärke s fixiert (fixs: boolen) ist und der Aussendurchmesser D geändert wird, werden folgende Prozeduren beginnend im HTML ausgelöst:

<input (keyup)="keyup_D(D)" [(ngModel)]="D">

2. Je nach dem, ob s fixiert ist oder nicht wird d_Ds() oder s_Dd() aufgerufen, laut folgendem Funktionskörper:

keyup_D(var: number): void {

if (this.fixs == true) { this.d_Ds(); }

this.s_Dd(); // Wird sicherheitshalber wenn nichts fixiert ist immer aufgerufen

this.foo_Area (); // Aufruf der Flächenformel

}

3. Wenn nun die Eingabewerte D, d, und s korrekt sind, wird endlich die Flächenformel

foo_Area (…) { ( (D*D)-(d+d) ) * Pi } das Ergebnis liefern.

Mein Gedanke ist nun, dass die Funktionen D_ds (…), d_Ds (…), s_Dd (…), foo_Area auf Äderungen lauschen, um dann sich entsprechen ausführen. Dann sorgt ANGULAR dafür, dass die Werte auch in den Input-Feldern erscheinen. Ich habe im Hinterkopf, dass ich eine Anwendung habe wo der Druchmesser in „vielen“ Berechnungen einhergehen und ich den Wert nur 1x ändern möchte. Wie gefragt, wird dadurch das Programm einfacher zu warten oder nicht?

Viele Grüße aus dem Norden

Jürgen

[AngularTool]

Oder anders gefragt: wer weiß eine gute Doku über Obserber / Subject bezogen auf Formeln bzw. Property Änderung und Auslösen von Events?

[dedlfix]

Tach!

Oder anders gefragt: wer weiß eine gute Doku über Obserber / Subject bezogen auf Formeln bzw. Property Änderung und Auslösen von Events?

Formeln sind nichts weiter als Algorithmen. Ob du aufgrund eines Ereignisses einen Variableninhalt änderst (Haken an einer Todo-Liste) oder den neuen Wert einer Variablen mittels einer Formel berechnest, ist vom Programmablauf sehr ähnlich.

Ob du selbst Ereignisse auslösen musst, ist eine andere Frage. Das braucht man meist nur zur Kommunikation zwischen ansonsten nicht direkt zusammenhängenden Programmteilen.

dedlfix.

[dedlfix]

Tach!

<input (keyup)="keyup_D(D)" [(ngModel)]="D">

Ich würde den Reactive-Forms-Ansatz nehmen, nicht den template-driven. Der Unterschied ist, dass du im Template die Eingabeelemente lediglich benennst (formControl(Name)), und alle Eventhandler im Controller setzt (über das valueChanges Observable), statt die Eventhandler im Template zu setzen, die dann Methoden im Controller aufrufen.

Mein Gedanke ist nun, dass die Funktionen D_ds (…), d_Ds (…), s_Dd (…), foo_Area auf Äderungen lauschen, um dann sich entsprechen ausführen.

Ähm ... nein. Die Formeln arbeiten selbständig. Die sollten nichts von Dingen der Benutzerführung oder des Programmablaufs wissen. Die müssen nur entsprechend aufgerufen werden, je nachdem welches Ereignis vorliegt, oder welche Bedingungen gegeben sind (deine Radiobuttons).

Die Formeln arbeiten zudem schnell, so dass man sie synchron aufrufen kann und nicht mit Obserservables, Subjekten und anderen RxJS-Dingen zu spicken braucht.

Dein eigentliches Problem scheint mir nur zu sein, den Ablauf für die Benutzeraktivitäten in Code zu formulieren.

Wie gefragt, wird dadurch das Programm einfacher zu warten oder nicht?

Depends. Wenn das Ziel ist, die Formeln testbar zu haben, dann sollten sie in einem Service untergebracht sein. Auch dann, wenn sie von mehreren Programmteilen benötigt werden. Wenn Testbarkeit nicht das Ziel ist, und sie auch nur innerhalb eines Controllers verwendet werden, kann man sie auch in private Methods unterbringen. Das macht zwar den Controller komplexer, nimmt aber etwas Komplexität aus dem Gesamtprogramm, weil man sich den Service spart. Allerdings kann das auch wieder zu Unübersichtlichkeit führen, wenn für ähnliche Fälle mal ein Service verwendet wird und mal nicht.

dedlfix.