Angular传递服务方法作为参数时丢失this引用问题求助

你遇到的报错核心是函数作为参数传递时丢失了原有this绑定。
当你直接传递this._b.foo作为参数时，你只是传递了foo方法本身的函数引用，脱离了ServiceB实例的上下文，所以方法内部访问this时就会变成undefined，触发Cannot read properties of undefined错误。重构前你是通过this._b.foo()的形式调用，this会自动绑定到_b这个ServiceB实例上，所以可以正常运行。

你的重构思路没有问题，这个错误完全可以避免，常用的解决方案有三种：

• 方法1：用箭头函数包裹传递（最推荐）
  传递参数时用箭头函数包裹调用，自动保留原有上下文，不需要修改原有服务的定义：

doFoo(input: Whatever): void {
    this.performFooBarAction(input, (param) => this._b.foo(param));
}

doBar(input: Whatever): void {
    this.performFooBarAction(input, (param) => this._b.bar(param));
}

• 方法2：用bind显式绑定this
  传递方法时通过bind方法把this绑定到ServiceB实例上：

doFoo(input: Whatever): void {
    this.performFooBarAction(input, this._b.foo.bind(this._b));
}

• 方法3：ServiceB方法定义时使用箭头函数
  直接在ServiceB中把foo、bar声明为箭头函数，让它们的this永久绑定到ServiceB实例：

@Injectable({ providedIn: 'root' })
export class ServiceB {
    foo = (input: Whatever): Observable<void> => {
        // 原有业务逻辑
    }

    bar = (input: Whatever): Observable<void> => {
        // 原有业务逻辑
    }
}

这种写法适配Angular单例服务的默认场景，不需要额外调整ServiceA的调用代码就能正常运行。

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