Angular中如何在外部方法访问函数内部变量的问题

嘿，我懂你现在的困扰——刚接触Angular，变量作用域加上图片加载的异步特性，确实容易让人摸不着头脑。咱们一步步把问题解决掉：

1. 把变量提升为组件成员属性 #

你现在的imgurl是mergeImages()函数的局部变量，作用域只限于这个函数内部，所以printvalue()根本找不到它。解决办法很简单：把imgurl定义成组件类的成员变量，这样组件里的所有方法都能访问到它。

先在你的组件类里添加这个属性：

export class YourComponent {
  // 定义为组件成员，初始值可以设为undefined或者空字符串
  imgurl: string | undefined;

  // 你的mergeImages方法
  mergeImages() {
    // 去掉这里的var imgurl，直接用this.imgurl
    const canvas: HTMLCanvasElement = this.canvas.nativeElement;
    const context = canvas.getContext('2d');

    const img1 = new Image();
    const img2 = new Image();

    img1.onload = () => {
      canvas.width = img1.width;
      canvas.height = img1.height;
      context.globalAlpha = 1.0;
      img2.src = '../assets/sun.jpg';
    };

    img2.onload = () => {
      context.globalAlpha = 1;
      context.drawImage(img1, 0, 0);
      context.globalAlpha = 0.5;
      context.drawImage(img2, 0, 0);

      // 给组件成员变量赋值
      this.imgurl = canvas.toDataURL("image/jpg");
      console.log(this.imgurl);
    };

    img1.src = '../assets/moon.jpg';
  }

  printvalue() {
    // 现在可以通过this访问了
    console.log(this.imgurl);
  }
}

2. 处理异步加载的问题 #

这里还有个隐藏坑：图片的onload是异步执行的。如果你在调用mergeImages()后立刻调用printvalue()，会发现this.imgurl还是undefined，因为img2.onload还没跑完。

如果需要确保printvalue()在imgurl赋值后再执行，可以把mergeImages()改成返回一个Promise：

mergeImages(): Promise<string> {
  return new Promise((resolve) => {
    const canvas: HTMLCanvasElement = this.canvas.nativeElement;
    const context = canvas.getContext('2d');

    const img1 = new Image();
    const img2 = new Image();

    img1.onload = () => {
      canvas.width = img1.width;
      canvas.height = img1.height;
      context.globalAlpha = 1.0;
      img2.src = '../assets/sun.jpg';
    };

    img2.onload = () => {
      context.globalAlpha = 1;
      context.drawImage(img1, 0, 0);
      context.globalAlpha = 0.5;
      context.drawImage(img2, 0, 0);

      const imgUrl = canvas.toDataURL("image/jpg");
      this.imgurl = imgUrl;
      resolve(imgUrl); // 完成Promise，返回结果
    };

    img1.src = '../assets/moon.jpg';
  });
}

// 调用的时候用async/await确保顺序
async printvalue() {
  // 等待mergeImages完成后再访问
  await this.mergeImages();
  console.log(this.imgurl);
}

这样就能保证printvalue()里的imgurl一定是已经赋值好的啦。

内容的提问来源于stack exchange，提问作者Stephen Reynolds