How to refresh a page on Ionic 3 (Ionic, Angular 5)

问题

I’m building a favorite list which I can erase list items within a page. It’s based on Ionic sqlite storage.

I found Ionic page will keep removed ion list items until I re-enter the list page. So it needs refreshing a page upon removing an item from ionic storage.

How can I refresh a particular page? window.location.refresh() seems to refresh the entire pages… this is not what I’m trying to do.

I need to refresh a single page out of twenty pages on my app so navCtrl.setRoot() will not work either.

Thanks in advance,

回答1:

Please Try this?

this.navCtrl.setRoot(this.navCtrl.getActive().component);

回答2:

If you're going for a list of items, I would suggest displaying them with an ngFor directive. That way when you update the list, it will automatically be updated where it is displayed rather than having to refresh the page or anything like that. Here's a short example:

HTML

<ion-content>
 <ion-list> 
  <div *ngFor="let item of items">
    <p>{{item.name}}</p>
  </div>
  <button (click)="deleteFromArray()">Delete From Array</button>
  <button (click)="addToArray()">Add To Array</button>
 </ion-list> 
</ion-content>

TYPESCRIPT

items: any[] = [{name:'Penguin'},{name:'Seal'},{name:'Lion'}];

deleteFromArray() {
  this.items.pop();
}

addToArray() {
  this.items.push({name: 'Whale'});
}

Hope this helps!

回答3:

use NgZone. It will refresh the component.

import { NgZone } from '@angular/core';

constructor(private zone: NgZone) {}

refresh() {
  this.zone.run(() => {
    console.log('force update the screen');
  });
}

来源：https://stackoverflow.com/questions/50115582/how-to-refresh-a-page-on-ionic-3-ionic-angular-5