Typescript navCtrl.push在Ionic3中不工作

我正在用Ionic制作一个应用程序，将图像上传到我的Firebase存储中。上传完成后，应用程序应将用户重定向到Welcome页面。上载正在工作，但由于某些原因，用户没有被重定向。看看代码的结尾：控制台确实显示了

上传的

，但是

这个.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);
  });

 }

---

在回调中，

此

的含义很可能不同。如果是这种情况，可以将

navCtrl

放在单独的变量中，也可以使用胖箭头函数

将

navCtrl

放在单独的变量中

此

的含义取决于您在中使用它的功能。由于回调是独立的函数，因此它们对

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添加了一种使用胖箭头表示法定义回调函数的新方法。在代码

函数（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);
});

---

解决了！非常感谢您不是一个而是两个非常好地解释了的解决方案！！！！