web-dev-qa-db-fra.com

Actualiser une page dans ionic2

Existe-t-il un moyen de rafraîchir une page, c’est-à-dire un seul écran dans ionic2.

J'ai essayé :

window.location.reload();

et 

location.reload();

mais il reconstruit l'application .. est-il possible d'actualiser uniquement cette page (écran particulier).

Aussi essayé:

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

en TypeScript:

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

    setTimeout(() => {
        console.log('Async operation has ended');
        refresher.complete();
    }, 2000);
}
htmlangularionic2refresher
12
Narendra Vyas

Essayez ce code:

this.navCtrl.setRoot(this.navCtrl.getActive().component);
16
Ahmad Aghazadeh

Vous pouvez également utiliser le rafraîchisseur ionique pour créer une action d’actualisation pour actualiser l’action sur la page.

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

3
catu

Je ferais ça: (basé sur la réponse de @Ahmad Aghazadeh)

this.navCtrl.Push(this.navCtrl.getActive().component).then(() => {
   let index = this.viewCtrl.index;
   this.navCtrl.remove(index);
})

=> Appuyez à nouveau sur cette page (en la rechargeant)

=> Supprimer la page sur laquelle nous étions (en utilisant index)

2
Cedric

Exemple d'utilisation du rafraîchisseur d'ions dans une fonction asynchrone dans ionic 3:

dans votre fichier .html:

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

et dans votre fichier .ts: 

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

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

         doRefresh(event) {
            samplefuncion(event);        
          }
1
hamid araghi

Html:

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

</ion-content>

TypeScript:

@Component({...})
export class NewsFeedPage {

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

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

}

source: Ionic doc

0
zouhair

Essayez ceci: il suffit de faire apparaître une page, puis de repousser cette page. 

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

J'espère que cela aidera. 

0
Anand_5050

Si vous êtes prêt à suivre une convention commune, j'ai trouvé un moyen très facile de recharger la vue actuelle (y compris tous ses paramètres). J'ai testé cela avec Ionic3, mais cela devrait toujours s'appliquer dans Ionic 2

Déplacez tout votre code d'initialisation pour chaque page dans ionViewDidLoad(), qui est exécuté UNE FOIS lors du premier chargement de la vue.

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;
}

De n'importe où ailleurs dans l'application, vous pouvez recharger la vue actuelle avec ce code

//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();
}
0
TwitchBronBron