ionic3 返回上一页，并刷新

无参数

通常情况，返回上一页并刷新，只需在上一页的Page生命周期（如ionViewWillEnter）中，调用刷新方法即可。本次介绍一种特殊情况的刷新处理：多页面情况下，Page2返回到Page1，而Page1是Tabs时，Page3是Page1的Tab。当Page3 通过app.getRootNav().push()进入Page2时，Page2返回到Page1，那么Page3是不会触发生命周期的。解决方案如下：

TwoPage(不需要处理)

@xxxxx
export class HomePage{
    constructor(){}
}

ThreePage

@xxxxx
export class ThreePage{
    constructor(){}
    //刷新
    onRefresh(){
      //do something
    }
}

OnePage

@xxxxx
export class OnePage{

     @ViewChild(Tabs) tabRef: Tabs;
      
      constructor(){}

     ionViewDidEnter() {
        let tab = this.tabRef.getSelected();
        if (tab != null) {
            let page = tab.getActive().instance;
            if (page) {
                if (page instanceof ThreePage) {
                    page.onRefresh();
                } 
            }
        }
    }
}

传参给上一页(触发事件型，如点击button，返回上一页)

Page2传参给Page1，本次以App.getRootNav().push App.getRootNav().pop的跳转，返回为例。

Events

OnePage

@xxxxx
export class OnePage{
    constructor(public navCtrl: NavController,
                      public navParams: NavParams,
                      public events: Events){}

    ionViewDidLoad(){
        this.events.subscribe('refresh', (backData) => {
              //backData就是TwoPage返回的数据         
              //this.onRefresh()
        });
    }

    //刷新
    onRefresh(){
      //do something
    }
}

TwoPage

@xxxxx
export class TwoPage{
    constructor(public navCtrl: NavController,
                      public navParams: NavParams,
                      public app: App,
                      public events: Events){}

    ionViewDidLoad(){
       
    }
   
    //触发事件
    onEvent(){
         this.app.getRootNav().pop().then(() => {
                this.events.publish('refresh', yourData);
            });
    }
}

Promise

OnePage

@xxxxx
export class OnePage{
    constructor(public navCtrl: NavController,
                      public navParams: NavParams,
                      public app: App,
                      ){}

    ionViewDidLoad(){

    }

    //刷新
    onRefresh(){
      //do something
    }

    jumpToTwoPage(){
         this.app.getRootNav().push('TwoPage', {callback: this.getBackData});
    }
    
    getBackData= (backData) => {
        return new Promise((resolve, reject) => {        
             //backData就是TwoPage返回的数据         
              //this.onRefresh()
              resolve();
        });
}

TwoPage

@xxxxx
export class TwoPage{  

    callback;
    constructor(public navCtrl: NavController,
                      public navParams: NavParams,
                      public app: App){
          this.callback = this.navParams.get("callback");
    }

    //触发事件
    onEvent(){
         if (this.callback) {
            this.callback(this.addressInfo).then(() => {
                this.app.getRootNav().pop();
            });
        }
    }
}

传参给上一页(物理键返回)

emmmm... 没有遇到过这种场景，如果有，那就将参数保存在localStorage →_→

最后编辑于：2018.12.27 17:02:32