同じディレクティブを単一のコンポーネント内の多くのdivに適用すると、そのディレクティブのイベントリスナーが最後のコンポーネントのみに添付されます

1つのコンポーネントに50個のdivがあります。私は "lazyload"という名前のディレクティブを作っています。そして私はこのディレクティブをすべてのdivに適用しています。 "lazyload"ディレクティブのonInitでは、私はscrollイベントのために登録しました。 scrollのeventlistener関数は、このdiv（私の場合は、このディレクティブが適用されているこれらの50個のdivすべて）がビューポート内にあるかどうかをチェックし、その特定のdivでいくつかの操作を実行するかどうかを確認します。しかし、このスクロールイベントは、私のビューの最後のdivのためだけに登録されているようです。同じディレクティブを単一のコンポーネント内の多くのdivに適用すると、そのディレクティブのイベントリスナーが最後のコンポーネントのみに添付されます

私のコンポーネントのテンプレート：

<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>

ディレクティブ「lazyLoadImage」です：

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

スクロールのイベントリスナーのみ反復の最後の製品に取り組んでいます。

出典

2016-05-02 Vineet ' DEVIN' Dev

これをPlunkerで再現可能にすることはできますか？ https://plnkr.co/edit/jUgXWx?p=info –

私は努力していますが、それは困難です。すべての指令の範囲を変える方法があるかどうか教えてください。私にはスコープの問題があるようです。角度js 1.xでは、ディレクティブのスコープを分離して解決しました –

いいえ、スコープはありません。私はそれが動作するはずだと思うが、いくつかの隠された問題があるかもしれない。問題をデバッグできるように問題を再現できるコードを実行する必要があると思います。 –