【问题标题】:how to return from a pushed page without reloading the parent page again in ionic?如何从推送页面返回而无需再次在 ionic 中重新加载父页面?
【发布时间】:2019-06-24 11:07:02
【问题描述】:

我有一个主标签(主页),其中显示所有帖子,一旦点击帖子,它将推送帖子详细信息页面:

开启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
}

再次进入主页时它会重新加载我所有帖子的原因是因为我在home.ts上的ionViewWillEnter()函数中加载了帖子:

ionViewWillEnter(){

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

        snapshot.forEach(childSnapshot => { 

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

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

【问题讨论】:

    标签: typescript ionic-framework ionic2


    【解决方案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
          });
        });
    
     }
    

    【讨论】:

      【解决方案2】:

      我有类似的问题。我尝试了不同的方法,没有任何结果。最后,我在 ionic 论坛上发表了一篇文章,其中一个人解释了他是如何使用 angular v5 中的 Observables 解决它的。

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

      【讨论】:

        猜你喜欢
        • 2017-12-05
        • 2021-03-12
        • 2023-04-04
        • 2021-10-25
        • 2018-12-18
        • 2016-04-27
        • 1970-01-01
        • 2016-01-12
        • 2019-07-10
        相关资源
        最近更新 更多