Question

我在一个组件上有50个div。我正在制作一个名为“lazyload”的指令。然后我将这个指令应用于所有这些div。在“lazyload”指令的onInit中，我已经注册了scroll事件。 scroll的eventlistener函数应该检查这个div（在我的例子中，是否应用了这个指令的所有这50个div）是否在viewport内，然后对该特定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);
            }
        }
    }
}

滚动的事件侦听器仅适用于迭代中的最后一个产品。

Answer 1

正如@yurzui所说，你正在重写事件处理程序。

Plunker example

我还修复了代码中的其他一些问题（如果您使用self = this和其他一些问题，则无需=>）。

ElementRef为null，因为, private _utils:UtilServices没有提供者。删除此参数会设置ElementRef。

将同一指令应用于单个组件中的多个div，将该指令的事件侦听器仅附加到最后一个

1 个答案: