如何在 Ionic 3 (Ionic, Angular 5) 上刷新页面

Question

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,

Answer 1

请试试这个？

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

Answer 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!

Answer 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');
  });
}