Anwenden derselben Anweisung auf viele divs in einer einzigen Komponente, fügt Ereignis-Listener dieser Anweisung nur an die letzte an.

Question

Ich habe 50 divs auf einer einzigen Komponente. Ich mache eine Direktive mit dem Namen "Lazyload". Dann wende ich diese Richtlinie an alle diese Divs an. In der OnInit von "Lazyload" -Richtlinie habe ich für Scroll-Ereignis registriert. Die Eventlistener-Funktion von scroll soll prüfen, ob dieses div (in meinem Fall alle diese 50 divs, auf die diese Anweisung angewendet wird) im Ansichtsfenster liegt oder nicht, und dann einige Operationen für dieses bestimmte div ausführen. Aber es scheint, dass dieses Scroll-Ereignis nur für das letzte div meiner Ansicht registriert ist.

Vorlage Meine Komponente:

<div class="product-container" *ngFor="#product of allProducts"> 
      <div class="product-image" 
      [lazyLoadImage]="product.image" > 
      </div> 
      <div class="product-desc"> 
       <p>{{product.name}}</p> 
       <p> <span>{{product.price | currency:'INR':true}}</span> <span>{{product.monthDiff + " months"}}</span> </p> 
      </div> 
     </div> 

Die Richtlinie "lazyLoadImage" ist:

@Directive({ 
    selector: '[lazyLoadImage]' 
}) 
export class LazyLoadImgDirective { 

    private _el: HTMLElement; 

    private _canLoadImage: boolean = false; 

    private _imgUrl: string; 

    @Input() 
    set lazyLoadImage(v){ 
     this._imgUrl = v; 
     if(v){ 
      this.attachEvent() 
     } 
    } 

    constructor(el: ElementRef, private _utils:UtilServices) { this._el = el.nativeElement;} 

    private _loadingDone: boolean = false; 

    loadImage(){ 
     //some operations 
    } 

    attachEvent() { 
     console.log("inside image load dir"); 
     var self = this; 
     setTimeout(() => self.loadImage(), 1); 
     window.onscroll = (event) => { 
      console.log("scrolling intercepted for: "+self._imgUrl);//log is shown only for the last element where this directive is applied 
      if (!self._loadingDone){ 
       setTimeout(() => self.loadImage(), 1); 
      } 
     } 
    } 
} 

Der Ereignis-Listener für Scroll funktioniert nur auf das letzte Produkt in der Iteration.

Answer 1

Wie @yurui sagte, Sie überschreiben den Event-Handler.

Plunker example

Ich reparierte auch einige andere Probleme in Ihrem Code (keine Notwendigkeit für self = this wenn Sie => und ein paar andere verwenden).

ElementRef ist null, weil es keinen Anbieter für , private _utils:UtilServices gibt. Durch das Entfernen dieses Parameters wird ElementRef eingestellt.