Child 组件调用 Parent 组件中的一个方法并且 return 一个值

Question

Parent

HTML

 <tr  
    [onTotalWeights]="totalWeights"
  >

代码

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

Child

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

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

我想从 child 和 return 的值调用 parent 上的方法。

目前的问题是在child中this.onTotalWeights()调用"this"关键字时指的是methods/variables里面的methods/variables 43=] 组件而不是来自 parent 组件。当我传递 totalWeights 函数时，不知何故上下文丢失了。

我该如何解决？

Answer 1

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

来自定义它

totalWeights(): number { ... }

totalWeightsFn = this.totalWeights.bind(this);

[onTotalWeights]="totalWeightsFn"

Child component calls a method in Parent component AND return a value