Question

ionViewDidLoad函数似乎被调用两次，这导致创建了AddressPage的多个视图。我调试了这个，看起来每当数据更新时，都会创建新的视图实例。这种行为似乎只有在我使用fireabse保存地址时才会发生。如果我注释掉代码以保存地址，则不会创建新视图，并且app会导航到上一个屏幕。有什么方法可以避免这种情况吗？

我在saveAddress方法中尝试了ViewCotnroller.dismiss()和NavController.pop()但似乎没有避免创建新视图。

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar) {

    platform.ready().then(() => {

      statusBar.styleDefault();
      statusBar.backgroundColorByHexString('#1572b5');
    });

  }

}

主页

import {NavController } from 'ionic-angular';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public firebaseProvider: 
     FirebaseProvider) {
  }

 //navigate to different view
 navigate(){
    this.navCtrl.push(AddressPage, {address:newAddress});
 }

}

地址页

import {NavController } from 'ionic-angular';
@Component({
  selector: 'page-address',
  templateUrl: 'address.html'
})
export class AddressPage {

   constructor(public navCtrl: NavController, public firebaseProvider: 
    FirebaseProvider, private navParams: NavParams) {
    this.addressKey = this.navParams.get('key');
   }

   ionViewDidEnter(){
      //load some data from server
   }

   saveAddress(){
     //save data to server
     this.firebaseProvider.saveAddress(newAddress);
     //move back
     this.navCtrl.pop();

   }

}

使用AngularFireDatabase

的Firebase提供程序

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';

@Injectable()
export class FirebaseProvider {

  constructor(public afd: AngularFireDatabase) { }


  saveAddress(address) {
     this.afd.list('/addresses').push(address);
  }

  updateAddress(key,dataToUpdate){
     return this.afd.list('addresses').update(key,dataToUpdate);
  }

}

我也试过这个，但它有同样的问题。

 this.firebaseProvider.saveAddress(newAddress).then(result => {
       // loadingSpinner.dismiss();
        this.navCtrl.pop();
      });

this.firebaseProvider.updateAddress(this.addressKey, updateItems)
        .then(() => {
         //   loadingSpinner.dismiss();
            this.navCtrl.pop()
     });

保存按钮的HTML

  <button type="button" ion-button full color="primary-blue" (click)='saveAddress()'>Save</button>

Answer 1

看起来取消订阅订阅者可以解决问题。 HomePage视图的订阅者没有取消订阅。我将Observable Subscriptions添加到数组中，并根据下面的代码取消订阅。

  ionViewWillLeave(){
    this.subscriptions.forEach(item=>{
      item.unsubscribe();
    });
  }

Answer 2

push方法用动作的结果来回复一个promise。我会改变这样的保存方法：

saveAddress(address) { 
    return this.afd.list('/addresses').push(address); 
}

然后在控制器中我会以这种方式改变它：

saveAddress(){ 
    //save data to serve
    this.firebaseProvider.saveAddress(newAddress).then(result => { 
    //do yours validations
    this.navCtrl.pop();
    });
}

随着这一点，您可以将页面导航添加到Firebase执行结果中。尝试一下这种方法，让我知道如果它不起作用，无论如何我会使用oninit只加载一次数据，因为我猜你想要这样做而不是ionViewDidEnter。

Ionic 3 NavController不会弹出视图而是创建一个新视图

2 个答案: