Angular中向catchError传递函数时this.snackBar为undefined的原因

问题核心原因 #

这个问题本质是JavaScript/TypeScript中的this上下文绑定规则导致的，两种写法的差异就在于函数执行时this的指向不同。

第一种写法catchError(this.handleError)为什么会失败 #

当你直接将类方法this.handleError作为参数传递给catchError时，你传递的只是函数本身的引用，函数会脱离原来的类实例上下文。
RxJS内部执行这个错误回调时，不会绑定你当前类的实例作为this，在Angular默认开启的严格模式下，此时函数内部的this会指向undefined，自然无法访问到类实例上注入的snackBar属性，就会报this.snackBar is undefined的错误。

注：你示例代码中构造函数的参数名写错为snackBack，如果实际代码也是这个拼写也会导致问题，需要和方法内访问的snackBar保持一致。

第二种写法catchError(err => this.handleError(err))为什么正常 #

箭头函数没有自己的this绑定，它的this继承自定义时所在的词法作用域，也就是你写这段pipe代码的类实例上下文。不管后续回调什么时候触发、被谁调用，this都会固定指向当前类的实例，所以可以正常访问到注入的snackBar实例。

其他可选的解决方法 #

除了箭头函数包裹调用的写法，你也可以用下面两种方式解决：

1. 手动绑定类实例到方法上

catchError(this.handleError.bind(this))

2. 直接把handleError定义为箭头函数类型的类属性

handleError = (err: HttpErrorResponse) => {
    this.snackBar.open(err.message)
    return throwError(err)
}

这种方式下直接传递catchError(this.handleError)也可以正常运行。

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