子组件调用父组件中的方法并返回值答案

【问题标题】：Child component calls a method in Parent component AND return a value子组件调用父组件中的方法并返回值
【发布时间】：2017-10-05 15:35:01
【问题描述】：

家长

HTML

 <tr  
    [onTotalWeights]="totalWeights"
  >

代码

totalWeights(): number { 
   return // Get sum of fields over the whole array
  }

儿童

  @Input() onTotalWeights: () => number;

   canApplyChanges() {
     return this.onTotalWeights() <= 100 && this.form.valid;
  }

我想从子级调用父级的方法并返回一个值。

目前的问题是，在子组件中 this.onTotalWeights() 被称为“this”关键字时是指子组件内部的方法/变量，而不是来自父组件。当我传递 totalWeights 函数时，上下文不知何故丢失了。

我该如何解决这个问题？

【问题讨论】：

【解决方案1】：

这是正常的 JS 行为。您可以通过调用.bind()来自定义它

totalWeights(): number { ... }

totalWeightsFn = this.totalWeights.bind(this);

[onTotalWeights]="totalWeightsFn"

【讨论】：

我也想过使用绑定，但我读过这个：stackoverflow.com/questions/38102948/… 这个解决方案提到了丢失的上下文，但没有提供上下文问题的绑定解决方案或者我没有看到它......
它使用箭头函数。使用箭头函数() => {} 是另一种实现相同目的的方法。对于传递闭包，箭头函数通常更方便，传递函数引用.bind() 通常更方便，因为它不需要重复像someObject.someCallback((x) => this.foo(x)) 这样的参数而不是someObject.someCallbacl(this.foo.bind(this))。