Angular 8 mit `document.getElementById(...).style;` ?

Aktuelle Programmier- und Auszeichnungssprachen Sonstige Sprachen
1

Hallo zusammen

Kann mir evtl. jemand erläutern, warum das („plain vanilla javascript“) unter TypeScript (JS ist bekanntlich ne Teilmenge davon) in der ngAfterViewInit()-Funktion nicht geht? Ich meine die Alertbox zeigt mir ja JSON an, mit allen CSS-Attributen…

Also: Ich sehe da keinen rationalen Grund, warum dies nicht funktionieren sollte. Und: Bitte keine „Tipps“ in der Art „in Angular macht man das aber anders!!“. Es geht um die Sache an sich, die Frage ist somit eher akademischer Natur…

Code hier:

ngAfterViewInit()
  {
  
  try {

      
      $(document).ready(function(event) {        
    
    setTimeout(function() {     
    
    
    try
    {
      var style = document.getElementById("sumup-card").style;
      
      style.border = "1px solid #000000;";
      
      alert(JSON.stringify(style));
    }
    catch(err)
    {
      alert(err);
    }
    
    
    }, 200);	
    
    
		});	
		}
		catch(err)
		{
		alert(err);
		}
  }

Angular HTML-Template:

<style>
<!--

#sumup-card {
  width: 640px;
  height: 0px;
  /* border: 1px solid #000000; */
}

//-->
</style>

<div id="sumup-card"></div>
<router-outlet></router-outlet>

…nun bin ich ca. schon den ganzen Tag dran, was mich zwar bei Angular nicht mehr wirklich verwundert.

Das was man mit HTML/CSS/JavaScript/JSON/XML „by scratch“ mit einer Minute Zeitaufwand berechnet, kann mit Angular „locker“ 1 Tag bis 1 Woche sein…

…und nein, ich denke nicht dass diese Einschätzung übertrieben ist!! Vor allem nicht am Anfang, da es eine äusserst steile Lernkurve hat.

(Eigentlich hasse ich den S*****s abgrundtief, ein Stellenwechsel wäre aber leider die einzige Option um was dagegen zu tun…)

2

Darf ich Fragen was dein erwarteter output ist und was tatsächlich passsiert?

implementiert deine Component auch wirklich AfterViewInit

3

Soviel ich weiss muss ich diese Marker-Interfaces (wird es wohl sein, ein leeres Interface welche nur ne Klasse speziell kennzeichnet) bei Angular 8 gar nicht mehr explizit implementieren.

Die werden schon im Hintergrund implementiert soviel ich weiss, und zwar alles. Habe alle diese Events mit einem alert getestet, dieses erscheint immer:

https://angular.io/guide/lifecycle-hooks

Also: Meine Klasse implementiert kein einziges Interfaces dieser Art, trotzdem werden all diese Funktionen ausgeführt, wenn ich diese in der Klasse erwähne.

Ich denke das Beispiel auf der Angular-Seite (export class PeekABoo implements OnInit) ist aus einer älteren Angular-Version als 8 (welche ich aktuell verwende)

4

Im ganzen Internet gibt es gemäss meiner Recherche KEIN EINZIGES Angular-Forum, ausser diese äusserst mühsam zu bedienenden „Google Groups“… und die Seite hackr.io hat die Angular-Sektion offenbar geschlossen.

Unglaublich, dass es keine Angular-Community im Netz gibt - habe gemeint diese Technologie sei etabliert. (Ist wohl eher ne Art „Geheimwissenschaft“ ;-))

5

Habe noch alle anderen „Hooks“ ausprobiert - keiner scheint ein explizites Implementieren der entsprechenden Interfaces vorauszusetzen.

Dem zufolge muss das „peek-a-boo“-Beispiel von hier obsolet sein und aus einer früheren Angular-Version stammen. (Falls das wirklich der Fall ist: Sind die nicht mal in der Lage, die Doku entsprechend anzupassen, WTF?)

->
https://angular.io/guide/lifecycle-hooks

6

Und noch was: Mit dem getElementsByClassName(…)[0]-Ansatz meckert der Transpiler was von ERROR in src/app/app.component.ts:145:28 - error TS2339: Property 'style' does not exist on type 'Element'.

…und dies obwohl alert(JSON.stringify(style)); dann doch nicht „undefined“, sondern korrektes JSON mit style-Infos ausgibt.

Angular ist meiner Meinung nach die totale Degeneration, schlimmer kann es nicht mehr werde was die Anwendung von Webanwendungen betrifft - Angular dient einzig und alleine dazu, wie IT-Welt komplizierter zu machen, somit den Kunden überflüssig/sinnlos komplizierte Lösungen aufzuschwatzen und damit möglichst viel Kohle zu generieren.

(Ich meine man kann ABSOLUT PROBLEMLOS irgendwelche Business-Anwendungen selbst komplett ohne AJAX erstellen, sehe nicht wo das Problem liegt. Das Problem ist eher, dass die Menschheit wohl dumm und oberflächlich ist, und primär auf irgendwelche GUIs wert legt als auf den betriebswirtschaftlichen Nutzen der Software.)

7

Workaround für die Sache wo der Transpiler reklamiert - einfach in ein eval(…) reinnehmen, unter Verwendung von Anführungszeichen:

 var elem = document.getElementsByClassName("sumup-card-class")[0];
          var style = eval("elem.style");                    
          style.border = "1px solid #000000;";          
          alert(JSON.stringify(style));

*** Bastel, bastel *** :wink:

CSS-Attribut setzen geht damit aber (selbstverständlich) noch immer nicht…

8

Von wegen Hooks und implementieren der entsprechenden Interfaces: https://github.com/angular/angular/issues/5814

Kann man, muss man aber nicht. Wenn man nix implementiert, dann kann man die Hook-Funktionen reinschreiben (oder auch nicht).

Wenn man was implementiert, dann MUSS man die dazu gehörige Funktion überschreiben. Sonst gibt’s nen Transpiler-Error.

Unlogischer, schräger und inkonsistenter könnte man es wohl nicht machen. Als alter Java-Hase stehen mir bei solchen Sachen definitiv „die Haare zu Berge“…