如何纠正功能范围？

Question

在我的模板中，我使用了一些渲染步进器的第三方组件，您可以在这些组件之间进行导航：

<my-stepper step="{{ currentStep }}" steps-label="steps"
   [stepChangeCallback]="stepChangeCallback">
   <my-stepper-step>First</my-stepper-step>
   <my-stepper-step>First</my-stepper-step>
   <my-stepper-step>First</my-stepper-step>
</my-stepper>

和

export class HeaderComponent implements OnInit {
   currentStep = 0;

   stepChangeCallback(selectedStep) { 
     this.currentStep = selectedStep; // PROBLEM: this does not point to HeaderComponent
   }
}

所以我想我可以使用固定的this指针生成一个新函数：

getStepChangeCallbackFunction() {
   return this.stepChangeCallback.bind(this);
}

和 [stepChangeCallback]="getStepChangeCallbackFunction()"

这确实有效，但是，我看到内存消耗不断增加，并且该网站最终会导致浏览器崩溃，因为它不断生成新的功能副本。

还有其他解决方案吗？

Answer 1

对于我来说，最好的选择是使用实例箭头功能：

stepChangeCallback = (selectedStep) => { 
  ...
}

您可以使用，[stepChangeCallback]="stepChangeCallback.bind(this)"但每次运行更改检测时，它也会创建一个新功能。

另一个选择是绑定this到构造函数中。

export class HeaderComponent implements OnInit {   
  constructor() {
    this.stepChangeCallback = this.stepChangeCallback.bind(this);
  }

   stepChangeCallback(selectedStep) { 
     ...
   }
}