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

Question

我正在构建一个收藏夹列表，我可以删除页面中的列表项。它基于 Ionic sqlite 存储。

我发现 Ionic 页面将保留删除的离子列表项，直到我 re-enter 列表页面。因此它需要在从离子存储中删除项目时刷新页面。

如何刷新特定页面？ window.location.refresh() 似乎刷新了整个页面……这不是我想要做的。

我需要在我的应用程序的二十个页面中刷新一个页面，所以 navCtrl.setRoot() 也不会工作。

提前致谢，

Answer 1

请试试这个？

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

Answer 2

如果您要获取项目列表，我建议使用 ngFor 指令显示它们。这样，当您更新列表时，它会在显示的位置自动更新，而不必刷新页面或类似的操作。这是一个简短的例子：

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>

类型说明

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

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

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

希望对您有所帮助！

Answer 3

使用 NgZone。它将刷新组件。

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

constructor(private zone: NgZone) {}

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

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

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

ionic-framework

ionic2

ionic3

angular

angular5