Angular4中嵌套函数无法访问组件变量问题求助

嘿，我之前也踩过一模一样的坑！这本质是JavaScript中this的上下文绑定问题——当你在jQuery的事件回调这类嵌套函数里直接用this时，它指向的是触发事件的DOM元素（比如那个被点击的a.editor_edit标签），而不是你的abcComponent组件实例，所以组件里定义的title、Desc、Name自然就拿不到，返回undefined啦。

下面给你几个靠谱的解决方案，随便选一个都能搞定：

方案1：使用箭头函数（最推荐） #

箭头函数不会创建自己的this，它会直接继承外层作用域的this（也就是你的组件实例），这样就能直接访问组件变量了：

@Component({ 
  selector: 'abc', 
  templateUrl: './abc.component.html', 
  styleUrls: ['./abc.component.css'], 
  providers: [abcService] 
})
export class abcComponent implements AfterViewInit,AfterViewChecked {
  title;
  Desc;
  Name;
  date=null;

  test(){ 
    this.title='a'; // 正常工作，因为这里的this指向组件实例
  }

  test11(){ 
    // 把jQuery回调改成箭头函数
    $('#cmg tbody').on('click', 'a.editor_edit', () => {
      console.log(this.title); // 现在能正常访问组件的title变量了！
      this.Desc = '更新描述'; // 也能修改组件变量
    });
  }
}

方案2：提前保存组件的上下文 #

在嵌套函数外部，先把组件的this存成一个变量（比如self或者_this），然后在回调里用这个变量访问组件：

test11(){ 
  const self = this; // 保存组件的this上下文
  $('#cmg tbody').on('click', 'a.editor_edit', function() {
    console.log(self.title); // 用self访问组件变量
    self.Name = '新名称';
  });
}

方案3：用bind()显式绑定上下文 #

通过bind(this)把回调函数的this强制绑定到组件实例上：

test11(){ 
  $('#cmg tbody').on('click', 'a.editor_edit', function() {
    console.log(this.title);
    this.Desc = '更新描述';
  }.bind(this)); // 绑定组件的this到回调函数
}

另外提个小建议：在Angular项目里，尽量优先使用Angular自带的事件绑定（比如模板里的(click)），而不是直接操作jQuery，这样能避免很多这类上下文问题，也更符合Angular的开发规范哦～

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