Angular中父子组件传函数时this上下文丢失问题

你遇到的是Angular里很常见的函数上下文绑定问题——当你把父组件的getAll函数作为对象属性传给子组件后，子组件调用它时，this不再指向父组件的实例了，自然就拿不到process_list这类属性。下面给你几个靠谱的解决方案：

方案1：用箭头函数定义目标函数 #

箭头函数会自动捕获定义时所在上下文的this，所以直接把getAll写成箭头函数，传递给子组件时就不会丢失上下文了：

export class ProcessListComponent implements OnInit {
  process_list: any;
  configObj: {};

  constructor(public http: HttpClient){}

  // 把getAll定义成箭头函数
  getAll = () => {
    // 这里的this会稳定指向ProcessListComponent实例
    return this.process_list;
  }

  ngOnInit() {
    this.configObj = {
      data: this.getAll,
      fields: {
        title: 'Id',
        body: [
          { name: 'Name', field: 'name'},
          { name: 'Final Material', field: 'final_material'},
          { name: 'Rivision', field: 'revision'}
        ]
      }
    };
  }
}

方案2：用bind()方法绑定this #

如果getAll必须是普通函数（比如需要继承或者被其他地方调用），可以在传递的时候用bind(this)把父组件的实例绑定进去：

export class ProcessListComponent implements OnInit {
  process_list: any;
  configObj: {};

  constructor(public http: HttpClient){}

  getAll() {
    return this.process_list;
  }

  ngOnInit() {
    this.configObj = {
      // 绑定父组件的this到getAll函数
      data: this.getAll.bind(this),
      fields: {
        title: 'Id',
        body: [
          { name: 'Name', field: 'name'},
          { name: 'Final Material', field: 'final_material'},
          { name: 'Rivision', field: 'revision'}
        ]
      }
    };
  }
}

方案3：用箭头函数包裹原函数（临时应急） #

要是不想改原函数的定义，也可以在configObj里用箭头函数包裹getAll的调用，这样也能保留父组件的this：

ngOnInit() {
  this.configObj = {
    data: () => this.getAll(), // 箭头函数包裹，确保this指向父组件
    fields: { /* 你的字段配置 */ }
  };
}

小提示 #

个人最推荐方案1，箭头函数的写法最简洁，而且能从根源上避免this上下文混乱的问题，后续维护起来也省心。

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