Moin Moin,
für eine Formelsammlung sollen einige Bedingungen erfüllt werden.
A) Die Eingabe soll auf Zahlen beschränkt werden
B) Komma-Eingaben sollen in EINEM Punkt geändert werden.
C) Die Werteingabe soll ohne „Enter“ erfolgen
D) Das Ergebnis soll simultan bei jeder Nummer-Eingabe angezeigt werden
E) Die Eingabe soll auf allen Formel-Variablen möglich sein (AxB = C ↔ C/B=A)
F) Viele kleine HTML / Componenten sollen jeweils nur eine Eingabe/Ausgabe steuern
G) Die „eigentliche Formel soll im Service hinterlegt werden
Auf der Webseite angulartool.de kann das Ergebnis angeschaut werden. Das ist aber noch sehr verbesserungswürdig und ich bin gespannt auf Eure Kritik.
Leider kann ich den desamten Code nicht im Forum hochladen. Daher meine „Gedanken“ im Einzelen:
A) Hier kommt eine Directive zum Zuge; wobei mit switch / case die zugelassen Zeichen ersichtlich sind.
### input-restriction.directive.ts
import {Directive, ElementRef, HostListener} from '@angular/core';
@Directive({
selector: '[appInputRestriction]'
})
export class InputRestrictionDirective {
constructor(private element: ElementRef) {
}
@HostListener('keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
switch (event.key) {
case '0': break;
case '1': break;
case '2': break;
case '3': break;
case '4': break;
case '5': break;
case '6': break;
case '7': break;
case '8': break;
case '9': break;
case ',': break;
case '.': break;
case 'Backspace': break;
case 'Insert': break;
case 'ArrowLeft': break;
case 'ArrowRight': break;
default: event.preventDefault();
}
}
}
Das ensprechende HTML Template sieht so aus:
### kreis-berechnung.component.html
<p>kreis-berechnung works!</p>
<label> Kreis Durchmesser
<input class="Input"
[(ngModel)]='D'
(keyup)="KreisFlaeche(D)"
appInputRestriction>
</label>
<label> Kreis Fläche
<input class="Input"
[(ngModel)]='A'
(keyup)="KreisDurchmesser(A)"
appInputRestriction>
</label>
Hier wird über z.B (keyup)="KreisFlaeche(D)" die richtige Formel beim loslassen der Taste aufgerufen. Das Angular Feature [(ngModel)]='D' bindet die Variable D an das Input.value. Die Directive appInputRestriction sorgt für die stressfreie Eingabe von ausschließe der zugelassenen Tasten.
In der
#### kreis-berechnung.component.ts wird die Logik der Anzeige verpackt:
import { Component, OnInit } from '@angular/core';
import { KreisFormelService } from '../../_services/kreis-formel.service';
@Component({
selector: 'app-kreis-berechnung',
templateUrl: './kreis-berechnung.component.html',
styleUrls: ['./kreis-berechnung.component.css']
})
export class KreisBerechnungComponent implements OnInit {
public D: number;
public A: number;
constructor(private Kreis: KreisFormelService) {
}
ngOnInit() { }
KreisFlaeche(D) {this.A = this.Kreis.getKreisFlaeche(D.replace(/,/, '.')) };
KreisDurchmesser(A) {this.D = this.Kreis.getKreisDurchmesser(A.replace(/,/, '.')) };
}
--- und die Formelen von/im dem Service aufgerufen. Hier wird auch über die D.replace(/,/, '.') das Komma zum Punkt gewandelt.
--- Schlussendlich wird im Angular Service die Formelsammlung bereitgestellt.
### kreis-formel.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class KreisFormelService {
constructor() { };
getKreisFlaeche (D) {
return D * D * Math.PI /4 ;
}
getKreisDurchmesser (A) {
return Math.pow( (A * 4 /Math.PI), 0.5);
}
}
Ich bin mir sicher, das Ganze Formel und HTML Gedöns kann noch etwas vereinfacht werden.
Jedoch möchte ich z.B die im HTML Template eingegeben Varialbe D (Durchmesser) auch in anderen Formeln / HTML Templates GLEICHZEIGIG NUTZEN, um Andere Berechnungen mit dem Durchmesser vorzunehmen (Widerstandsmoment…. )
Grüße
Jürgen
AngularTool
dedlfix
JürgenB
Matthias Apsel