Angular 4：ngAfterViewInit中jQuery事件处理器调用TypeScript方法报错

这问题我之前帮好几个开发者踩过坑，核心就是this指向的误区！在jQuery的事件处理器里，默认的this指向的是触发事件的DOM元素，而不是你的Angular组件实例，所以直接调用组件的setValueInsideDetailForm方法自然会报"undefined"错误。下面给你几个靠谱的解决办法：

方法一：用箭头函数（最推荐） #

箭头函数不会绑定自己的this，它会继承外层上下文的this（也就是你的组件实例），写法简洁还不容易出错：

ngAfterViewInit() {
  // 假设你的目标元素选择器是#target-element
  $('#target-element').on('click', () => {
    // 这里的this就是组件实例，可以直接调用方法
    this.setValueInsideDetailForm();
  });
}

方法二：提前保存组件的this到变量 #

如果习惯ES5写法或者对箭头函数不太熟悉，可以先把组件的this存成一个变量（比如self、that），在jQuery回调里用这个变量调用方法：

ngAfterViewInit() {
  const self = this; // 把组件实例的this存起来
  $('#target-element').on('click', function() {
    // 用self代替this，指向组件实例
    self.setValueInsideDetailForm();
  });
}

方法三：用bind()绑定this #

通过Function.prototype.bind()方法，把jQuery回调函数的this强制绑定为组件实例：

ngAfterViewInit() {
  $('#target-element').on('click', function() {
    this.setValueInsideDetailForm();
  }.bind(this)); // 绑定组件的this到当前回调函数
}

额外小提醒 #

如果不是必须用jQuery，更推荐用Angular原生的事件绑定（比如在模板里写(click)="setValueInsideDetailForm()"），这样能避免混合使用jQuery带来的变更检测、生命周期冲突等问题。但如果业务场景必须依赖jQuery，上面的三种方法都能完美解决你的问题～

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