“严格按照您的要求做，但您不应该那样做”

Question

我正在使用标签，每次重新进入页面时都无法刷新页面。我正在使用Ionic 4，因此无法使用navController。

我已经使用ionViewWillEnter()在我的应用程序中显示数据库中的数据，并且可以正常工作，但是每次我转到另一个页面并返回该页面时，它将重复数据。（例如，我显示了来自Firebase的5个数据。当我转到另一个页面并重新进入该页面时，它显示10（重复相同的数据），然后显示15、20、25 ...，依此类推。）

food.page.html

<ion-list  *ngIf="showFood">
    <ion-row *ngFor='let FoodFruit of showTypeOfFood("fruit")'>
        <ion-col>
            <ion-card>
                <div class="card-title">{{FoodFruit.wtitle}}</div>
            </ion-card>
        </ion-col>
    </ion-row>
</ion-list>

food.page.ts

ionViewWillEnter(){
    this.currentUser = this.afAuth.auth.currentUser;

    if(this.currentUser == null){
     this.showFood = false;
    }
    else{
      this.showPersonalFood();
    }
}

showPersonalFood(){
    this.afAuth.auth.onAuthStateChanged(
    (user)=>{
      if(user){
        this.showFood = true;

    this.afDatabase.object('foods/').snapshotChanges().subscribe(
      (action)=>{
            if(action.payload.val())
            {
              console.log(action.payload.val());
              let items: any = action.payload.val();
              items.forEach(
                (food) =>{
                  this.foods.push(food);
                }
              );
            }
            else
            {
              console.log("No Data");
            }
          });
      }
    }
  );

}

showTypeOfFood(type)
  {
    let items:any = [];
    this.foods.forEach((Food)=>{
      if(Food.wtype == type)
      {
        items.push(Food);

      }
    });
    return items;
    }

在这里，showTypeOfFood只是一个显示Firebase数据的函数。因此，它可以完美地显示“食物”标签页中的数据，但不会刷新/清除缓存或删除先前的数据。如何实现此目的？

Answer 1

问题在于Ionic在刷新页面时效果不佳。如果您向Ionic创作者询问，那不是错误，而是功能...

但是他们有购买的方法：

“严格按照您的要求做，但您不应该那样做”

为页面提供一个属性，该属性在每次进入时都会更改（例如时间戳记），因此Ionic被迫通过将其视为新页面来更新页面。

为什么不应该这样做：
如果这样做，您的内存将过载，并且您的应用程序可能会崩溃

“从技术上讲，您不会刷新页面，而只是刷新数据，但确实可以完成工作”方式

首先，在ionViewDidEnter（）中执行所有操作（这样，当您真正进入页面时，所有操作都将完成）。

然后您必须：

声明属性：

导出类VisionnagePage实现OnInit { public YourVar = []; //您通过此访问它。 constructor（）{} }
进入页面时清空全局变量
将项目放入此变量中。
阅读它（就像您在阅读showTypeOfFood("fruit")一样）

Answer 2

您好，在Ionic 5中，我在tabs.html文件中解决了此问题：

    <ion-tabs #tabs (ionTabsWillChange)="gets(tabs)">
    
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="home">
          <ion-icon name="home"></ion-icon>
          <ion-label>{{'home' | translate}}</ion-label>
        </ion-tab-button>
    </ion-tabs>

在tabs.ts文件中：

     gets(tab: IonTabs) {
        if ("/tabs/" + tab.getSelected() != this.router.url) {
          this.router.navigateByUrl("tabs/" + tab.getSelected());
        }
      }

此代码对我有用。如果在“儿童”路线中选择了选项卡，则重新加载页面。

每次进入Ionic 4刷新选项卡页面

2 个答案:

“严格按照您的要求做，但您不应该那样做”

“从技术上讲，您不会刷新页面，而只是刷新数据，但确实可以完成工作”方式