Electron/Angular13回调函数内调用注入服务报ipcRenderer未定义错误

报错的核心是回调函数执行时this的上下文不是Angular组件实例：当你直接将handleStop绑定给mediaRecorder.onstop时，事件触发时this会指向mediaRecorder对象，而非你的组件，因此this._electronService会被判定为undefined。

以下三种方法任选其一即可，注意要同时处理ondataavailable和onstop两个回调（handleDataAvailable也存在相同的this指向问题）：

方案1：使用箭头函数包装回调 #

修改onSourceSelected中的事件绑定代码，用箭头函数包裹原方法，继承组件的this上下文：

async onSourceSelected(displayId: string) {
    // ... 原有代码省略 ...
    
    // 替换事件绑定逻辑
    this.mediaRecorder.ondataavailable = (e) => this.handleDataAvailable(e);
    this.mediaRecorder.onstop = (e) => this.handleStop(e);
};

方案2：在构造函数中绑定this #

在组件构造函数里，将方法的this强制绑定到组件实例：

constructor(private dialogRef: DialogRef, @Inject(DIALOG_DATA) public data: any, private _electronService: ElectronApiServiceService, private zone: NgZone, private dialog: DialogService) { 
    // 绑定this到组件实例
    this.handleDataAvailable = this.handleDataAvailable.bind(this);
    this.handleStop = this.handleStop.bind(this);
}

之后原有的事件绑定代码无需修改，回调执行时this始终指向组件。

方案3：将方法定义为箭头函数类属性 #

直接把handleDataAvailable和handleStop定义为箭头函数形式的类属性，天然绑定组件的this：

// 替换原方法定义
handleDataAvailable = (e: any) => {
    this.recordChunks.push(e.data);
};

handleStop = async (e: any) => {
    const blob = new Blob(this.recordChunks, {
        type: 'video/webm; codecs=vp9'
    });
    
    const buffer = Buffer.from(await blob.arrayBuffer());
    console.log(buffer)

    this._electronService.ipcRenderer.send('stop-recording', buffer);
};

这种方式下，后续的事件绑定代码无需额外处理。

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