时间戳

首页 > 解决方案 > 如何纠正功能范围？

javascript - 如何纠正功能范围？

问题描述

在我的模板中，我使用了一些呈现步进器的第三方组件，您可以在其中在步骤之间导航：

<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()"

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

还有其他解决方案吗？

标签： javascriptangular

解决方案

至于我，这里最好的选择是使用实例箭头函数：

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

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

另一种选择是this在构造函数中绑定。

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

   stepChangeCallback(selectedStep) { 
     ...
   }
}

推荐阅读