无法在指令angular4中访问此对象

Question

我在angular指令中创建HTMLImageElement。

ngAfterViewInit() {
    this.renderer.setAttribute(this.el.nativeElement, "src", this.onePxlImgPlaceHolder);

    // create HTML image element to load image in the background
    this.dynamicImg = new Image();
    // register the function that will be called on image load
    this.dynamicImg.onload = function () {
        this.renderer.setAttribute(this.el.nativeElement, "src", this.dynamicImg.src);
    };

    this.dynamicImg.src = this.originalImgSrc;
}

在ngAfterViewInit内部， this对象可用，但在onload注册的函数内部不可用，因此我无法访问renderer和el 。 在onload函数中， this对象引用元素本身。

我什至尝试过

this.dynamicImg.onload = function () {
            this.renderer.setAttribute(this.el.nativeElement, "src", this.dynamicImg.src);
    }.bind(this);

不起作用！ 解决办法是什么？

Answer 1

您可以使用箭头功能保持范围：

this.dynamicImg.onload = () => {
  this.renderer.setAttribute(this.el.nativeElement, "src", this.dynamicImg.src);
};

这个答案提供了一个深入的解释，在Javascript箭头和正常功能之间的差异，包括他们如何处理this