在Angular中绑定回调函数

Question

我在Angular项目中加载了一个外部js文件，该函数之一是回调函数，已将其分配给我的函数fnBarcodeScanned(scan)之一。

一切正常，当我收到正确扫描的条形码的警报时，但下一行没有将条形码分配给我的本地变量this.scanData。

export class HomeComponent implements OnInit {
 scanData: string;

 ngOnInit() {
 }

 fnScanEnable() {
    EB.Barcode.enable({ allDecoders: true }, this.fnBarcodeScanned);
    this.scanData = "enabled: press HW trigger to capture.";
 }

 fnBarcodeScanned(scan) {
   alert(scan.data);
   this.scanData = "barcode: " + scan.data;
 }

  fnScanDisable() {
   EB.Barcode.disable();
   this.scanData = "disabled: press 'enable' to scan.";
 }
}

如何绑定fnBarcodeScanned(scan)函数？在我看来，当传递给回调时，它与组件失去了绑定。

Answer 1

您可以使用bind()或arrow function

使用bind()：

fnScanEnable() {
    EB.Barcode.enable({ allDecoders: true }, this.fnBarcodeScanned.bind(this));
    this.scanData = "enabled: press HW trigger to capture.";
 }

使用arrow function：

fnBarcodeScanned = (scan) => {
   alert(scan.data);
   this.scanData = "barcode: " + scan.data;
 }