AngularJS 2 TSファイル内のDOM要素にアクセスするには？

Question

私はAngularJSが初めてです。私はすべての画像の背景としてスピナーを入れようとしています。いくつかの画像があるので、tsファイルの中に単一の変数isLoadedを使用することはできません。

私はテンプレートでこれを使用します。

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

次に機能loaded()でTSファイル内で、どのように私はイベントをトリガした要素にアクセスすることができますか？そして、そのイベントを引き起こした特定の要素のクラスspinnerを削除するにはどうしたらいいですか？次のように私はそれをやったのディレクティブを学習した後

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

Answer 1

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

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); 
    } 
} 

次に、あなただけの追加属性としてmyLoadingどんなイメージにも。もちろん、loadingクラスとerrorクラスをCSSで定義し、この宣言子をモジュール宣言セクションに追加する必要があります。

申し訳ありませんが、この「フレームワーク」はさまざまな面で魅力的です。型付き言語やリアクティブプログラミング以外に、私はこれにメリットはありません。

PS。私が理解できなかったことは、関数名onLoadとonErrorが恣意的であると思われることです。私はそれらをどこにでも呼びませんでした。私はそれらの名前を選ぶことができますが、それでも動作します。ポイントが何であるか分かりません。

Answer 2

：

constructor(private renderer:Renderer){ 


} 

loaded($event){ 

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

そしておそらく少し賢く、あなたのクラスの内部