AngularJS TypeScript控制器$onInit未调用问题求助

Hey there, let's get your $onInit() firing properly! The key issue here boils down to how you define the method in your TypeScript class and how you wire up your AngularJS component. Here's a step-by-step breakdown:

核心规则：$onInit必须是控制器实例的方法 #

AngularJS component lifecycle hooks (like $onInit) need to be instance methods on your controller class, not static/class-level functions. AngularJS looks for these methods on the instantiated controller object, so if you define $onInit as a static method, it won't be found.

正确的类写法示例 #

import * as angular from 'angular';

class MyComponentController {
  // 声明组件绑定的属性（如果有的话）
  public userData: any;

  // 注入依赖（TypeScript中用构造函数注入）
  constructor(private $http: angular.IHttpService) {
    // ❌ 不要在这里做依赖绑定属性的初始化！
    // 构造函数执行时，组件的绑定还未完成，userData还是undefined
  }

  // ✅ 正确：实例方法，AngularJS会自动调用
  public $onInit(): void {
    // 这里是初始化逻辑的正确位置，绑定的属性已可用
    console.log('$onInit triggered!', this.userData);
    this.loadAdditionalData();
  }

  private loadAdditionalData(): void {
    this.$http.get('/api/data')
      .then(response => {
        // 处理数据
      });
  }
}

// 正确注册组件
angular.module('myApp').component('myComponent', {
  templateUrl: 'my-component.template.html',
  controller: MyComponentController, // 直接传类，不要new实例！
  bindings: {
    userData: '<' // 单向绑定示例
  }
});

常见错误要避免 #

• 静态方法错误：不要写 static $onInit() —— 静态方法属于类本身，不是实例，AngularJS找不到它。
• 错误的组件注册：不要在controller属性里实例化类（比如controller: new MyComponentController()），AngularJS需要自己实例化控制器来触发生命周期钩子。
• 在构造函数里做初始化：构造函数执行早于$onInit，此时组件的绑定属性还没被赋值，所有依赖绑定的逻辑都应该放在$onInit里。

额外排查步骤 #

如果还是没触发，试试这些验证：

• 在控制器构造函数里加console.log('Controller instantiated!')，确认控制器被正确创建。
• 检查组件的bindings定义是否正确，有没有拼写错误（绑定名称错误可能导致组件初始化异常）。
• 确保你使用的是AngularJS 1.5+版本 —— $onInit是在1.5版本引入的组件生命周期钩子，旧版本不支持。

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