在ionic2中刷新页面

Posted 2023-02-22

【中文标题】在ionic2中刷新页面

【英文标题】：Refresh a page in ionic2

【发布时间】：2017-05-13 10:32:38

【问题描述】：

有没有办法只刷新一个页面，即在 ionic2 中只刷新一个屏幕。

我试过了：

window.location.reload();

和

location.reload();

但它会重建应用程序.. 有没有办法只刷新该页面（特定屏幕）。

也试过了：

<ion-input *ngIf="no_internet === 1" (click)="refresh($event)"></ion-input>

在 TypeScript 中：

refresh(refresher) 
    console.log('Begin async operation', refresher);

    setTimeout(() => 
        console.log('Async operation has ended');
        refresher.complete();
    , 2000);

【问题讨论】：

你能解释一下你到底想在你的页面中更新什么吗？使用ionic时还有其他方式上传内容，不建议刷新页面

【参考方案1】：

试试这个，只需弹出一个页面，然后再次推送该页面。

this.navCtrl.pop(); 
this.navCtrl.push(NewPage);

希望这会有所帮助。

【参考方案2】：

在 ionic 3 的异步函数中使用 ion-refresher 的示例：

在您的 .html 文件中：

<ion-content no-padding >
<ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

在你的 .ts 文件中：

    constructor(...) 
     ...
    samplefuncion(null)
       asyncFunction().then(()=>
    ...//after success call
    ...
    if (event)    
    event.complete();

    ,(error)=>
    ....
    if (event)
    event.complete();
    )
    

         doRefresh(event) 
            samplefuncion(event);        
          

【参考方案3】：

HTML:

  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

</ion-content>

打字稿：

@Component(...)
export class NewsFeedPage 

  doRefresh(refresher) 
    console.log('Begin async operation', refresher);

    setTimeout(() => 
      console.log('Async operation has ended');
      refresher.complete();
    , 2000);
  

来源：Ionic doc

【参考方案4】：

我会这样做：（基于@Ahmad Aghazadeh 的回答）

this.navCtrl.push(this.navCtrl.getActive().component).then(() => 
   let index = this.viewCtrl.index;
   this.navCtrl.remove(index);
)

=> 再次推送此页面（再次加载）

=> 删除我们所在的页面（使用索引）

【讨论】：

和方法ionViewWillEnter 可用于管理新加载视图的任何准备工作

【参考方案5】：

如果你愿意遵循一个共同的约定，我已经找到了一种非常简单的方法来重新加载当前视图（包括它的所有参数）。我使用 Ionic3 对此进行了测试，但它仍应适用于 Ionic 2

将每个页面的所有初始化代码移动到ionViewDidLoad()，在第一次加载视图时运行一次

import  Component  from '@angular/core';
import  NavController, NavParams  from 'ionic-angular';
import  Api  from '../../providers/api';
import  Movie  from '../../interfaces/movie';

@Component(
    selector: 'page-movie-info',
    templateUrl: 'movie-info.html'
)
export class MovieInfoPage 

    constructor(
        public navCtrl: NavController,
        public navParams: NavParams,
        public api: Api
    ) 
    

    /**
     * Run all page initialization in this method so that this page
     * can be refreshed simply by re-calling this function
     */
    ionViewDidLoad() 
        //access any parameters provided to the page through navParams. 
        var movieId = this.navParams.data.movieId;
        this.api.movies.getById(movieId).then((movie) => 
            this.movie = movie;
        );
    
    public movie: Movie;

从应用程序的其他任何地方，您都可以使用此代码重新加载当前视图

//get the currently active page component
var component = this.navController.getActive().instance;
//re-run the view load function if the page has one declared
if (component.ionViewDidLoad) 
    component.ionViewDidLoad();

【参考方案6】：

试试这个代码：

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

【讨论】：

它会删除所有以前的导航。

这不是解决方案，正如@Yawar 所说，您删除了所有以前的导航，

删除所有导航。不是解决方案

试试这个：只需弹出一个页面，然后再次推送该页面。希望这会有所帮助:) this.navCtrl.pop(); this.navCtrl.push(NewPage);

为了避免影响导航，我通过包装组件（product list）来解决刷新视图需要在一个函数中更新并在 didLoad、添加和删除动作

【参考方案7】：

您还可以使用离子刷新器，在页面上创建拉动刷新操作

http://ionicframework.com/docs/v2/api/components/refresher/Refresher/

【讨论】：

然后在按钮上创建(click)="refresh()"动作，并在ts文件中创建刷新方法

我请你看看我更新的问题，你能建议我哪里错了吗。

好吧，通常你会在模板中的方法调用中传入一个 $event，但是如果你在模板中将'refresher'变量设置为早期的东西，我想它应该可以工作.否则，请尝试在模板中传入 $event。但是你真的需要传入任何东西吗？你能不能只调用你的 ionViewWillEnter() 方法，或者创建一个方法来刷新页面上你需要的数据？

forum.ionicframework.com/t/ionic-2-refresh-current-page/47167/3

您的 ion-list 或您正在使用的任何东西都是从 ts 文件中的数组获取数据，对吗？然后只需在您的刷新方法中更新该数组，列表就会更新。

【参考方案8】：

试试这个：$window.location.reload(); $route.reload() use to reload route.

如果您使用的是$stateProvider : $state.go($state.current, , reload: true)；

或

var currentPageTemplate = $route.current.templateUrl;
$templateCache.remove(currentPageTemplate);
$route.reload();