从JavaScript函数调用Angular组件方法时出现undefined报错如何解决？

• 你定义的process()是独立于Angular组件的普通函数，它内部的this默认指向全局对象（浏览器环境下为window），而processDone是PaymentProcessComponent类的实例方法，只有组件实例才有权限访问该方法，全局对象上不存在这个方法，因此调用时会抛出undefined异常。

方案1：给外部process函数绑定组件实例this #

如果必须保留process为外部全局函数，在组件初始化时给process绑定当前组件实例作为this指向即可：

import { Component, NgZone, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { GetSelectedProductService } from '../ServiceOfService/get-selected-product.service';
import { Router } from '@angular/router';

// 外部定义的process函数
function process(){
  // 你的业务逻辑
  const response = {status: 'success'};
  this.processDone(response);
}

@Component({
  selector: 'app-payment-process',
  templateUrl: './payment-process.component.html',
  styleUrls: ['./payment-process.component.css']
})
export class PaymentProcessComponent implements OnInit {

   constructor() {}

   ngOnInit(): void { 
     // 核心逻辑：将process的this绑定为当前组件实例，挂载到全局可调用
     window.process = process.bind(this);
   }

    processDone(response){
        console.log(response);
    }
  }

方案2：将process移入组件内部 #

不需要全局调用process的情况下，直接把process定义为组件的内部方法，天然共享组件实例的this：

@Component({
  selector: 'app-payment-process',
  templateUrl: './payment-process.component.html',
  styleUrls: ['./payment-process.component.css']
})
export class PaymentProcessComponent implements OnInit {

   constructor() {}

   ngOnInit(): void { }

   // process移入组件内部
   process(){
    // 你的业务逻辑
    const response = {status: 'success'};
    this.processDone(response);
   }

    processDone(response){
        console.log(response);
    }
  }

方案3：用箭头函数固定this指向 #

需要全局调用的场景下，也可以直接在组件内部用箭头函数定义process，自动绑定当前组件的this：

@Component({
  selector: 'app-payment-process',
  templateUrl: './payment-process.component.html',
  styleUrls: ['./payment-process.component.css']
})
export class PaymentProcessComponent implements OnInit {

   constructor(private ngZone: NgZone) {}

   // 箭头函数自动绑定组件this
   process = () => {
    const response = {status: 'success'};
    this.processDone(response);
   }

   ngOnInit(): void { 
     // 挂载到全局供JS环境调用
     window.process = this.process;
   }

    processDone(response){
      // 如果调用后视图不更新，用NgZone包裹逻辑确保变更检测生效
      this.ngZone.run(() => {
        console.log(response);
        // 其他业务/视图更新逻辑
      })
    }
  }

注意如果你的Angular版本开启了严格模式，挂载全局方法时需要给window扩展对应的类型声明，避免TS类型报错。

内容的提问来源于stack exchange，提问作者AMAR MAGAR