navCtrl.push 在 Ionic3 中不起作用

Question

我正在使用Ionic制作一个应用程序，可以将图像上传到我的Firebase存储。上传完成后，应用应将用户重定向到欢迎页面。上载工作正常，但由于某种原因未重定向用户。看看代码的末尾：控制台确实显示Uploaded，但this.navCtrl.push(WelcomePage)不起作用。

upload() {
let storageRef = firebase.storage().ref();
const filename = "profilePic";
const imageRef = storageRef.child(`images/${filename}.jpg`).putString(this.profilepicture, firebase.storage.StringFormat.DATA_URL);
imageRef.on('state_changed', function(snapshot){
var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
document.getElementById("percent").innerHTML = "Progresso:" + Math.floor(progress) + "%";   
console.log('Upload is ' + progress + '% done');
switch (snapshot.state) {
case firebase.storage.TaskState.PAUSED:
console.log('Upload is paused');
break;
case firebase.storage.TaskState.RUNNING:
console.log('Upload is running');
break;
}
}, function(error) {
// Handle unsuccessful uploads
}, function() {
// Handle successful uploads on complete
console.log('Uploaded');
this.navCtrl.push(WelcomePage);
});
}

Answer 1

很可能this的含义在您的回调中是不同的。如果是这种情况，您可以将navCtrl放在单独的变量中，也可以使用胖箭头函数。

将navCtrl放在单独的变量中

this的含义取决于您使用它的功能。由于回调是单独的函数，因此它们对this也有自己的值。所以在回调this.navCtrl里面不存在。

解决方案是在回调之前将所需的值捕获到唯一的变量名称中：

var navCtlr = this.navCtrl;
imageRef.on('state_changed', function(snapshot){
var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
document.getElementById("percent").innerHTML = "Progresso:" + Math.floor(progress) + "%";   
console.log('Upload is ' + progress + '% done');
switch (snapshot.state) {
case firebase.storage.TaskState.PAUSED:
console.log('Upload is paused');
break;
case firebase.storage.TaskState.RUNNING:
console.log('Upload is running');
break;
}
}, function(error) {
// Handle unsuccessful uploads
}, function() {
// Handle successful uploads on complete
console.log('Uploaded');
navCtrl.push(WelcomePage);
});

使用胖箭头函数

ES6 添加了使用胖箭头表示法定义回调函数的新方法。在您的代码中，function(error) {可以替换为(error) => {。除了略短之外，新符号实际上保留了回调中this的含义。所以：

imageRef.on('state_changed', (snapshot) => {
var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
document.getElementById("percent").innerHTML = "Progresso:" + Math.floor(progress) + "%";   
console.log('Upload is ' + progress + '% done');
switch (snapshot.state) {
case firebase.storage.TaskState.PAUSED:
console.log('Upload is paused');
break;
case firebase.storage.TaskState.RUNNING:
console.log('Upload is running');
break;
}
},(error) => {
// Handle unsuccessful uploads
}, () => {
// Handle successful uploads on complete
console.log('Uploaded');
this.navCtrl.push(WelcomePage);
});