無法在指令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