Angular 5中Promise回调作用域限制及成员变量访问问题咨询

这个问题其实很常见，核心是this的指向差异：普通function回调会创建自己的作用域，里面的this并不指向你的组件类实例，所以访问不到snackbar这类成员变量。完全可以解决，给你三种常用的方案：

1. 使用箭头函数（最推荐） #

箭头函数不会绑定自己的this，它会继承外层作用域的this（也就是你的组件类实例），写法也最简洁，是Angular项目里的常规做法：

this.afs.doc(path).set({ ...some code }).then((docRef) => {
  this.snackbar.open('Snackbar message', 'OK'); // 现在可以正常访问snackbar了
});

2. 提前保存this到变量 #

在Promise调用前，把类实例的this保存到一个变量（比如self、that），然后在回调里用这个变量访问成员：

const self = this;
this.afs.doc(path).set({ ...some code }).then(function(docRef){
  self.snackbar.open('Snackbar message', 'OK'); // 通过self访问类成员
});

3. 用bind()绑定this #

通过bind()方法把回调函数的this强制绑定到类实例上，这样回调里的this就和类里的this一致了：

this.afs.doc(path).set({ ...some code }).then(function(docRef){
  this.snackbar.open('Snackbar message', 'OK');
}.bind(this)); // 绑定this到组件类实例

三种方法里，箭头函数是最简洁且符合现代JS/TS风格的，优先推荐使用它。

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