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和{{1} }。在el函数内部，onload对象引用元素本身。

我甚至尝试过

this

不工作!!解决方案是什么？

Answer 1

您可以使用arrow function来保留范围：

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

This回答深入解释了Javascript中箭头和普通函数之间的差异，包括它们如何处理this

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

1 个答案: