函数内的角度访问变量

Question

我是角度新手。我不知道如何访问函数（）中的变量。这是我的代码

  mergeImages() {
    var imgurl;
    var canvas: HTMLCanvasElement = this.canvas.nativeElement;
    var context = canvas.getContext('2d');


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

    img1.onload = function() {
      canvas.width = img1.width;
      canvas.height = img1.height;
      context.globalAlpha = 1.0;
      img2.src = '../assets/sun.jpg';
    };
    img2.onload = function() {
      context.globalAlpha = 1;
      context.drawImage(img1, 0, 0);
      context.globalAlpha = 0.5; //Remove if pngs have alpha
      context.drawImage(img2, 0, 0);

       imgurl = canvas.toDataURL("image/jpg");
      //console.log(imgurl)

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


     }

现在我需要从另一个方法访问“imgurl”

 printvalue(){
   need to access imgurl
}

edit 1 - 问题是 angular 在 printvalue() 上找不到 var a 它只能在 function something()

内工作

Answer 1

你想在这里创建一个范围变量并访问整个组件， 在 angularJS 早期，有一个 $scope 变量，您可以在其中访问该变量，在最新的 Angular 版本中，您需要使用 this 访问整个变量。

所以你需要尝试

     imgurl : string;
mergeImages() {

    var canvas: HTMLCanvasElement = this.canvas.nativeElement;
    var context = canvas.getContext('2d');


    let img1 = new Image();
    let 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; //Remove if pngs have alpha
      context.drawImage(img2, 0, 0);

       this.imgurl = canvas.toDataURL("image/jpg");
      //console.log(imgurl)

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


     }

Answer 2

像这样转换你的代码

let imgurl;
mergeImages() {

    var canvas: HTMLCanvasElement = this.canvas.nativeElement;
    var context = canvas.getContext('2d');


    let img1 = new Image();
    let 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; //Remove if pngs have alpha
      context.drawImage(img2, 0, 0);

       this.imgurl = canvas.toDataURL("image/jpg");
      //console.log(imgurl)

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


     }