Angular 2 同一类中从一个函数给变量赋值后如何在另一函数获取

现有代码的问题 #

• 类属性声明语法错误：定义类属性不需要加this.前缀，你写的public this.miVariable:any;属于非法语法
• 异步执行顺序错误：loadService.cargar()返回的是Observable对象，subscribe内部的回调是异步执行的，你在ngOnload里同步调用load()之后立刻执行otraFuncion()时，接口请求还没有返回，miVariable还没有完成赋值，自然拿不到目标值
• 额外语法问题：Angular的标准组件生命周期钩子是ngOnInit而非ngOnload；你当前的代码闭合括号位置错误，导致otrafuncion被定义在了类外部；用到的carga属性也没有提前声明

修正方案 #

基础修正版（最常用） #

调整调用逻辑，等接口返回完成赋值后再调用otraFuncion即可：

// 注意类名首字母大写符合TS编码规范
export class Clase {
  // 正确声明类属性
  public miVariable: any;
  public carga: any;

  // 必须先注入你的loadService
  constructor(private loadService: LoadService) {}

  // 用标准的Angular初始化钩子
  ngOnInit(): void {
    this.load();
  }

  load() {
    this.loadService.cargar().subscribe(
      (respuesta) => {
        this.carga = respuesta;
        this.miVariable = this.carga.mivalorRecogido;
        // 赋值完成后再调用取值函数
        this.otraFuncion();
      }
    );
  }

  otraFuncion() {
    console.log(this.miVariable);
  }
}

灵活调用版 #

如果需要在任意时机都能调用otraFuncion且保证能拿到已赋值的变量，可以把load改成返回Promise的形式，配合async/await使用：

export class Clase {
  public miVariable: any;
  public carga: any;

  constructor(private loadService: LoadService) {}

  async ngOnInit(): Promise<void> {
    // 等待load执行完成赋值后再往下走
    await this.load();
    this.otraFuncion();
    // 后续任意位置调用otraFuncion都能拿到有效值
  }

  // 改写load方法返回Promise
  load(): Promise<void> {
    return new Promise((resolve) => {
      this.loadService.cargar().subscribe(
        (respuesta) => {
          this.carga = respuesta;
          this.miVariable = this.carga.mivalorRecogido;
          resolve();
        }
      );
    });
  }

  otraFuncion() {
    console.log(this.miVariable);
  }
}

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