AngularJS 2 wie auf DOM-Element in TS-Datei zugreifen?

Question

Ich bin neu in AngularJS. Ich versuche, allen Bildern einen Spinner als Hintergrund zu geben. Da es mehrere Bilder gibt, kann ich keine einzige Variable isLoaded in der ts-Datei verwenden.

Ich benutze dies in der Vorlage:

<img src="{{document.thumbUrl}}" class="spinner" (load)="loaded()" /> 

Dann in der Funktion loaded() in der TS-Datei, wie kann ich das Element zugreifen, die das Ereignis ausgelöst hat? Und wie kann ich die Klasse spinner für das bestimmte Element entfernen, das das Ereignis ausgelöst hat?

Answer 1

<img src="{{document.thumbUrl}}" class="spinner" (load)="loaded($event)" /> 

in Ihrer Klasse

constructor(private renderer:Renderer){ 


} 

loaded($event){ 

    console.log($event.target); // is the img 
    this.renderer.setElementClass($event.target, '', false); 
} 

Und vielleicht ein bisschen schlauer:

<img #image src="{{document.thumbUrl}}" [class.spinner]="!image.loaded" (load)="image.loaded='true'" /> 

Answer 2

Nach Richtlinien Lernen ich es getan habe, wie folgt:

import {Directive, ElementRef, Input, HostListener, Renderer} from '@angular/core'; 

@Directive({selector: '[myLoading]'}) 
export class ImageLoadingDirective 
{ 
    constructor(private el: ElementRef, 
       private renderer: Renderer) 
    { 
    } 

    @HostListener('load') onLoad() 
    { 
     this.renderer.setElementClass(this.el.nativeElement, 'loading', false); 
    } 

    @HostListener('error') onError() 
    { 
     this.renderer.setElementClass(this.el.nativeElement, 'errLoading', false); 
    } 
} 

Dazu einfach hinzufügen myLoading als Attribut e zu jedem Bild. Natürlich sollten Sie die Klassen loading und error in CSS definieren, und Sie sollten diese Anweisung auch in den Moduldeklarationsabschnitt aufnehmen.

Sorry, dieses "Framework" saugt in vielerlei Hinsicht. Anders als die typisierte Sprache und die reaktive Programmierung sehe ich darin keinen Vorteil.

PS. Was ich nicht verstanden habe ist, dass die Funktionsnamen onLoad und onError scheinbar willkürlich sind. Ich habe sie nirgendwo angerufen, und ich kann für sie irgendwelche Namen wählen, aber sie funktionieren immer noch. Keine Ahnung, worauf es ankommt.