TypeScript中init()函数无法访问公共变量myVariable问题求助

嘿，这个问题我之前也踩过坑，核心是AngularJS组件的生命周期时机没把握对——你在控制器的constructor里直接调用init()的时候，组件的输入绑定还没完成赋值，所以this.myVariable是undefined；而等init()里的Promise异步完成后调用convert()时，AngularJS已经把绑定的值传进来了，所以就能正常访问啦。

为啥会这样？ #

AngularJS 1.5+的组件里，控制器的constructor会在组件绑定被赋值之前就执行。你用的bindings: { myVariable: '<' }是单向输入绑定，这个绑定的赋值操作是AngularJS在组件初始化流程中，晚于构造函数的步骤才完成的。

简单说就是：构造函数跑完的时候，父组件传过来的myVariable还没来得及赋值给当前控制器的this.myVariable，这时候调用init()自然拿不到值。而等到Promise异步完成（不管是API请求耗时还是啥），AngularJS已经完成了绑定初始化，convert()里就能拿到正确的值了。

怎么解决？ #

用AngularJS组件自带的**$onInit生命周期钩子**就好！这个钩子会在组件的所有绑定都完成初始化之后才被调用，完美适配你的场景。把init()的调用从constructor移到$onInit里：

export class MyController {
  public myVariable: MyVariable;

  constructor(private $scope: ng.IScope) {
    // 这里只放依赖注入相关的，别碰需要绑定值的逻辑
  }

  // 用$onInit代替构造函数里的初始化调用
  $onInit(): void {
    this.init().then(() => {
      this.convert();
    });
  }

  private init(): Promise<void> {
    console.log("init(): ", this.myVariable); // 现在能拿到正确的值啦
    // 这里放心调用依赖myVariable的REST API
    return Promise.resolve(); // 示例Promise，替换成你的实际API请求
  }

  private convert(): void {
    console.log("convert(): ", this.myVariable); // 依然正常工作
  }
}

额外提醒 #

组件的生命周期钩子是AngularJS官方推荐的初始化方式，$onInit就是专门用来处理绑定完成后的初始化逻辑的，比在构造函数里直接调用靠谱多了。要是你的REST API请求需要用myVariable当参数，那必须等绑定完成再发起请求，不然参数会是undefined，API请求肯定要报错的。

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