Angular中如何从事件监听器返回字符串并赋值给变量

问题原因 #

你遇到的问题有两个核心原因：

• CustomHandler.on() 是事件监听注册方法，它的返回值是监听器实例/取消监听的函数，不会返回回调函数内的返回值，你直接把这个方法的返回值赋值给 errorMessage 本身就不符合逻辑。回调里的代码只会在error事件触发时才会异步执行，返回值也只会传给事件调度逻辑，不会反向传给on方法的调用者。
• 你用普通函数function(){}定义回调，回调内部的this指向的不是Angular组件实例，就算你在回调内给this.errorMessage赋值也找不到对应的变量。

修正方案 #

改用箭头函数绑定组件this指向，在回调内部直接给errorMessage赋值即可：

ngOnInit() {
  CustomHandler.on("error", (event: {message: string}) => {
    // 事件触发时直接给组件变量赋值
    this.errorMessage = JSON.stringify(event.message);
  });
}

额外注意事项 #

• 如果事件是第三方库触发、没有运行在Angular的NgZone上下文中，赋值后视图没有同步更新，可以注入ChangeDetectorRef调用detectChanges()手动触发变更检测。
• 记得在ngOnDestroy生命周期中取消事件监听，避免内存泄漏，示例如下：

private unsubErrorEvent?: () => void;

ngOnInit() {
  // 接收on方法返回的取消监听函数
  this.unsubErrorEvent = CustomHandler.on("error", (event: {message: string}) => {
    this.errorMessage = JSON.stringify(event.message);
  });
}

ngOnDestroy() {
  // 组件销毁时取消监听
  this.unsubErrorEvent?.();
}

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