如何从推送的页面返回而无需再次在ionic中重新加载父页面?

时间:2019-01-31 03:40:25

标签: typescript ionic-framework ionic2

我有一个主选项卡(主页),其中显示了所有帖子,一旦单击该帖子,它将推动该帖子的详细信息页面:

home.ts上:

 show_detail_page(id,title,content){

    this.navCtrl.push(PostDetailPage, {
        id: id,
        title: title,
        content: content 
    });
 }

Postdetailpage.ts

back() {
    this.viewCtrl.dismiss();
    //this.navCtrl.pop(); also tried this method
}

之所以会在再次进入主页时重新加载我所有的帖子,是因为我在ionViewWillEnter()的{​​{1}}函数中加载了帖子:

home.ts

我想在不重新加载主页的情况下关闭详细信息页面,或者将详细信息页面以类似于弹出页面的方式推入堆栈?

2 个答案:

答案 0 :(得分:1)

由于ionViewWillenter()每次我们导航到主页都被触发。 (无论是从详细信息页面返回还是从其他主页导航至主页)

我已将ionViewWillenter()中的加载数据更改为ionViewDidLoad(),因为将页面推送到导航堆栈时将触发一次。

因此,当我从详细信息页面返回到主页时,该主页没有重新加载新数据+它停留在相同的滚动位置(我认为这很酷,并且更加用户友好)

ionViewDidLoad(){ //triggered only once when pushed to navigation stack

 firebase.database().ref('/posts/').once('value').then(snapshot => {

    snapshot.forEach(childSnapshot => { 

     //rest of the code
    });
 });

但是现在如何重新加载数据?

使用<ion-refresher>方法,用户可以手动下拉以重新加载/刷新页面:

home.html

   <ion-refresher (ionRefresh)="doRefresh($event);">
     <ion-refresher-content 
       pullingText="Pull to refresh" 
       pullingIcon="arrow-dropdown" 
       refreshingSpinner="circles"
       refreshingText="..fetching">
     </ion-refresher-content> 
   </ion-refresher>

home.ts

 doRefresh(refresher) {

    firebase.database().ref('/posts/').once('value').then(snapshot => {

      snapshot.forEach(childSnapshot => { 

        //rest of the code
      });
    });

 }

答案 1 :(得分:0)

我有类似的问题。我尝试了不同的方法,但没有解决。最终,我在ionic论坛上发表了一篇文章,其中一位家伙解释了他如何使用Angle v5中的Observables解决它。

请参考他的帖子中的内容。 https://medium.com/wizpanda/dealing-with-breaking-change-in-ionic-5-db3ba711dfcd