Angular组件传函数给Service时如何保留正确this上下文

这是JavaScript/TypeScript中常见的函数执行上下文丢失问题：当你将this.printPage作为回调参数传递给registerShortcut方法时，传递的只是函数本身的引用，脱离了原组件实例的绑定。事件触发时回调在全局上下文（严格模式下为undefined）执行，自然无法访问组件实例上的属性。
另外你贴的服务代码里还有个拼写错误：模板字符串里写的是keycombination（全小写），和参数名keyCombination（驼峰）不一致，会导致快捷键监听失效，记得一并修正。

你可以根据项目代码规范选任意一种：

• 调用侧手动绑定上下文
  最直接的改法，不需要修改服务代码，在注册时用bind绑定组件实例this即可：

  shortCutService.registerShortcut('control.shift.p', this.printPage.bind(this));
  

  也可以用箭头函数包裹回调，箭头函数会继承外层作用域的this指向，不会出现上下文丢失：

  shortCutService.registerShortcut('control.shift.p', () => this.printPage());
  

• 优化服务方法支持传入上下文
  如果你不想每个调用的地方都手动写bind，可以改服务的registerShortcut方法，增加上下文参数，内部统一处理绑定：

  public registerShortcut(
    keyCombination: string,
    handler: (event: KeyboardEvent) => any,
    context?: unknown
  ): void {
    const finalHandler = context ? handler.bind(context) : handler;
    // 注意修正原来的变量名拼写错误
    this.renderer.listen(document, `keydown.${keyCombination}`, finalHandler);
  }
  

  组件调用时把当前实例作为第三个参数传入即可：

  shortCutService.registerShortcut('control.shift.p', this.printPage, this);
  

• 组件方法用箭头函数属性定义
  把组件内的printPage定义为箭头函数形式的类属性，函数在初始化时就绑定了组件实例的this，传递时不会丢失上下文：

  // 组件内修改方法定义
  printPage = () => {
    const urlToPrint = this.someVariableInThisObject;
    // 其余业务逻辑
  }
  
  // 注册时不需要额外处理
  shortCutService.registerShortcut('control.shift.p', this.printPage);
  

  提示：该写法的方法不会挂载在组件原型上，每个组件实例会独立持有一份方法副本，绝大多数业务场景下这点性能影响可以忽略。

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