我试图了解这里的问题以及为什么如果我以某种方式调用函数会收到错误消息,而以另一种方式调用函数却没有收到错误消息,为什么呢?这是首先产生错误的方法:
player.service.ts文件
在@Injectable
我有
private roomsRef: Firebase;
constructor() {
this.roomsRef = new Firebase("https://xxx.firebaseio.com/rooms");
}
postGameActions(roomId: string) {
console.log("post game actions start on " + roomId);
//error on below 'this'
this.roomsRef.child(roomId).child("board").once("value", snap => {
let board = snap.val();
//do stuff with 'board' object
});
}
room.component.ts文件
activateTimer(roomId: string, roomName: string, callback) {
var timer = setInterval(redirectTimer, 1000);
var seconds: number = 5;
var timerHtml = document.getElementById("divRedirectTimer" + roomName);
timerHtml.innerHTML = "[" + seconds + "]";
function redirectTimer() {
timerHtml.innerHTML = "[" + (seconds--) + "]";
if(seconds === 0) {
clearInterval(timer);
callback(roomId);
}
};
}
像这样调用非工作版本
activateTimer(room.id, room.name, _playerService.postGameActions)
错误:
EXCEPTION: TypeError: this is undefined
工作版本
像这样工作正常,但不使用,setInterval()
因为activateTimer
仅调用service方法
room.component.ts文件
activateTimer(roomId: string, roomName: string) {
var timer = setInterval(redirectTimer, 1000);
var seconds: number = 5;
var timerHtml = document.getElementById("divRedirectTimer" + roomName);
timerHtml.innerHTML = "[" + seconds + "]";
function redirectTimer() {
timerHtml.innerHTML = "[" + (seconds--) + "]";
if(seconds === 0) {
clearInterval(timer);
}
}
this._playerService.postGameActions(roomId);
调用这样的工作版本
activateTimer(room.id, room.name)
当我postGameActions
作为回调调用时,为什么“ this”未定义?我确定我在这里缺少一些简单的东西
您需要将调用包装到箭头函数中:
activateTimer(room.id, room.name, () => {
_playerService.postGameActions();
});
代码中的问题是您直接引用了一个函数,因此丢失了将在其上执行的对象。
另一种方法是使用bind方法:
activateTimer(room.id, room.name, _playerService.postGameActions.bind(_playerService);
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句