Formelsammlung effektiv ausbauen und Eingaben kontrollieren

[AngularTool]

Moin Moin,

ich bin mir nicht sicher, ob ich so nun auf dem richtigen (schnellen) weg bin.

Das HTML Template in home-page.component.html

Das ist die {{was}} <br>

A.Eigenschaft2Num -- A = {{A.ValueEigenschaft}} <br>
B.Eigenschaft2Num -- B = {{B.ValueEigenschaft}} <br>

<button (click)="( moment(A.ValueEigenschaft, B.ValueEigenschaft) )" >A x B </button><br>
Erg.: {{Mt.ValueEigenschaft}}   (stimmt erst nach Button Click) <br>
<br>

Mt: {{Mt}}<br>
Mt.NamenEigenschaft: {{Mt.NamenEigenschaft}}<br>
Mt.ValueEigenschaft: {{Mt.ValueEigenschaft}}<br>
<br>
<br>
NeuEigenschaft: {{NeuEigenschaft}}<br>
NeuEigenschaft.Eigenschaft1: {{NeuEigenschaft.NamenEigenschaft}}<br>
NeuEigenschaft.Eigenschaft2Num: {{NeuEigenschaft.ValueEigenschaft}}<br>



---
Dann die dazugehörige Compoente. home.page.component.ts

~~~ javascript
import { Component, OnInit } from '@angular/core';
import { FunctionsObjectService } from '../../Services/functions-object.service';
import { VariablenObjectService } from '../../Services/variablen-object.service';

@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.css']
})
export class HomePageComponent implements OnInit {
was = 'HomePage';

A = new VariablenObjectService('A', 5);
B = new VariablenObjectService('B', 2);
Mt = new VariablenObjectService('Mt', 0);
Func: FunctionsObjectService;

// So etwas würde ich gerne für die Funktionen verwenden
NeuEigenschaft = new VariablenObjectService('Neues', 4711);

  /* constructor() {} // Gehjt nicht, da Service im Constructor angemeldet werden muss*/

   constructor(Func: FunctionsObjectService) {
     this.Func = Func;
   }

  ngOnInit() {}

  // Ganz übel, da hier die Funktion erstellt wird, und nicht aus dem Service
  // moment(a: number , b: number ) { this.Mt = (a * b); }

  moment(a: number , b: number ) { this.Mt.ValueEigenschaft = this.Func.Mt(a, b); }

  // Mein Ziel etwas einfacher
  // moment(a: number , b: number ) { this.Mt = Funktion vom Service} ohne den 2.Aufruf der a, b in this.Func.Mt(a, b)
}

Hier nun der Service für die Funktionen als function-object.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class FunctionsObjectService {

  constructor() {}

  Mt(x: number , y: number): number {
    return x * y;
  }

  Diff(x: number , y: number): number  {
    return x / y;
  }

 }


Und hier die Variablen (Klasse) als Serive: variablen-object.service.ts

~~~ javascript
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class VariablenObjectService {

  public NamenEigenschaft = 'Unbekannter Variablen Name';
  public ValueEigenschaft = 0;

  constructor(VariablenNamen: string, Wert: number) {
    this.NamenEigenschaft = VariablenNamen;
    this. ValueEigenschaft = Wert;

    function VarNamen() {
      return this.NamenEigenschaft;
    }

    function VarWert() {
      return this.ValueEigenschaft;
    }
  }
}


Das läuft soweit, jedoch glaube ich nicht an der Sinnhaftigkeit.
Aber das ist doch iergenwo schon DI, oder?

Grüße
Juergen