web-dev-qa-db-fra.com

Comment recharger la page d'ions après pop () dans ionic2

J'ai 2 pages Page1 and Page2. J'ai utilisé this.nav.pop() dans Page2 et il apparaîtra la Page2 et la Page1 permettra, mais je veux actualiser la Page1. Merci d'avance. 

javascriptangularionic2
24
Akash Rao

vous pouvez passer la page parent avec le nav Push. De cette façon, vous pouvez accéder à la page parente en tant que paramètre de navigation. 
dans la page parente :

 goToChildPage() {
    this.navCtrl.Push(ChildPage, { "parentPage": this });
 }

et dans la page enfant before pop, vous pouvez appeler des fonctions sur la page parente

this.navParams.get("parentPage").someFnToUpdateParent();
  //or
this.navParams.get("parentPage").someFnToRefreshParent();
26
noel zubin

Ignorez les implémentations angulaires directes suggérées ici, surtout que vous utilisez Ionic 2 et que les suggestions supposent Ionic 1. Ne mélangez pas trop d'angles directs dans votre application ionique, à moins qu'il n'y ait pas d'implémentation ionique pour ce dont vous avez besoin. Importer "Events" de ionic/angular2 dans les deux pages, puis dans Page2, faire quelque chose comme:

this.events.publish('reloadPage1');
this.nav.pop();

Et dans Page1 put

this.events.subscribe('reloadPage1',() => {
 this.nav.pop();
 this.nav.Push(Page1);
});
19
Jonathan Bardi

Vous voudrez peut-être en implémenter une dans votre page:

ionViewWillEnter ionViewDidEnter

Veuillez consulter la documentation de navController et du cycle de vie des pages: http://ionicframework.com/docs/v2/api/components/nav/NavController/

16
user2674268

La solution simple qui fonctionnait pour moi était de rappeler la méthode get service dans ionViewDidEnter 

ionViewDidEnter() {
    this.loadGetService();
}
12
Marko

En PAGE 1:

import { Events } from 'ionic-angular'
constructor(public events:Events){
   this.listenEvents();
}
... ...
listenEvents(){
   this.events.subscribe('reloadDetails',() => {
    //call methods to refresh content
   });
}

Sur la page 2:

import { Events } from 'ionic-angular'
constructor(public events:Events, public navCtrl:NavController){
}

function(){
   this.events.publish('reloadDetails');
   this.navCtrl.pop();
}

entrez le code ici

4
Silver Wing

Vous pouvez envisager d’envoyer un événement avant l’appel this.nav.pop pour laisser la page 1 se recharger.

3
gucheen

Je charge simplement les détails de la page 1 dans une fonction ionViewWillEnter (en utilisant Ionic 2). Ceci gère à la fois le chargement initial et tout rafraîchissement lors du retour à la page 1.

La documentation est ici .

ionViewWillEnter
"Fonctionne lorsque la page est sur le point d'entrer et devient la page active."

2
AndrWeisR

Comme Jonathan l'a dit, vous pouvez importer des événements depuis ionic-angular, mais vous n'avez pas besoin de Push et Pop à nouveau, appelez vos méthodes pour ne recharger que le contenu.

En page2:

this.events.publish('reloadDetails');
this.navCtrl.pop();

En page1:

this.events.subscribe('reloadDetails',() => {
    //call methods to refresh content
});

Ça marche pour moi.

2
Dave

J'ai passé une journée et demie sur un problème similaire. La solution est vraiment anti-climatique.

Je passe un groupe de formulaires de page-1 à page-2. Je met à jour les valeurs FormGroup dans Page-2. Lorsque j'ouvre Page-2, le formulaire de Page-1 n'est pas mis à jour avec les nouvelles valeurs. Il n'a pas surveillé les changements.

Pour résoudre ce problème, je corrige le FormGroup avec lui-même après que Page-2 ait été affiché mais toujours dans le composant Page-2.

Ceci est plus réactif, mais nécessite un appel direct à close ().

// Page-2 close method
public close(): void {
    this.navCtrl.pop();
    this.formGroup.patchValue(this.formGroup.value);
}

Tout cela englobe tout, mais je vois l'actualisation à la page 1.

// Page-2 nav controller page event method
ionViewWillUnload() {
    this.formGroup.patchValue(this.formGroup.value);
}
1
Brian Duguid

J'ai trouvé cette technique pour recharger une page:

this.navCtrl.insert(1, MyPage);
this.navCtrl.pop();
1
SiteXw

J'ai eu le même problème et j'ai passé de nombreuses heures à chercher et à essayer la solution.

Si je comprends bien, votre problème est:

La page 1 contient des liaisons que vous obtenez à partir d’une API/Webservice.

La page 2 a quelques entrées et lorsque vous appuyez sur le bouton retour (pop), vous souhaitez enregistrer les données et actualiser les liaisons de la page 1.

La façon dont j'ai résolu le problème consistait à lire un article sur StackOverflow qui, à présent, je ne trouve pas :( !!

La solution utilise un service injectable.

PAGE 1:

/* IMPORTS */

import { App, Nav, NavParams } from 'ionic-angular';
import { Oportunidades } from '../../services/oportunidades.service';

/* SOME BINDINGS HERE */ 
{{oportunidades.mesActual.num_testdrive}}

/* CONSTRUCTOR */
  constructor(
    private oportunidades: Oportunidades, // my injectable service!
    public app: App,
    public nav: Nav,
    public params: NavParams
  ) {

// Call to the Injectable Service (named oportunidades):
    this.oportunidades.getOportunidades();
  }

SERVICE INJECTABLE:

/* IMPORTS */ 
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class Oportunidades {

  public url = 'http://your-API.URL';
  public data: Observable<Object>;
  public mesActual: Object = [];

  constructor(private http: Http){
    //GET API DATA
    this.data = http.get(this.url).map(res => res.json());
  }

  getOportunidades() {
    this.data.subscribe(data => {
      this.mesActual = new MesActual(
        data["mes_actual_slide"].num_testdrive,
        ...
        //Here I get the API data and set it on my injectable object
      );
    });
  }
}

PAGE 2:

/* SOME IMPORTS */
import { NavController } from 'ionic-angular';
import { UserData } from '../../services/data.service';
import { Oportunidades } from '../../services/oportunidades.service';
import { Http, Headers, URLSearchParams } from '@angular/http';

/* SOME example BINDINGS and INPUTS: */
@Component({
  template: `
  {{ day[selectedDay].dia }}
    Input data: 
    <ion-input type="number" clearOnEdit="true"
      #ventas id="ventas" value={{day[selectedDay].ventas}}
      (keyup)="setVal(ventas.value, $event)">
    </ion-input>
  `,
  providers: [
  ]
})

export class PageInsert {

  constructor(
    public navCtrl: NavController,
    private http: Http,
    private userData: UserData,
    public oportunidades: Oportunidades // my injectable service!
  ) {

    send(selectedDay){
      var url = 'http://your.api.url/senddata';

      // I SAVE data TO API / Webservice
      this.http.post(url, params, { headers: headers })
      .map(res => res.json())
      .subscribe(
        data => { 
          console.log(data); 
          // Here i'll call to the Injectable service so It refresh's the new data on Page1 
         // in my case, this send function is called when "pop" or "back" button of ionic2 is pressed
         // This means: On click on back button -> Save and refresh data of the Injectable that is binded with the Page1
          this.oportunidades.getOportunidades(); 
          return true; },
        error => { 
          console.error("Error saving!"); 
        }
       );
    }
}

J'espère que cela peut vous aider!! Demandez des problèmes similaires :)

1
gtamborero

Dans certaines situations, au lieu de pop (), vous pouvez utiliser la fonction Push (). Lorsque vous entrez dans la page avec la fonction Push (), elle est rechargée . Vous pouvez également supprimer la page2 de la navigation. 

 this.navCtrl.Push(TabsPage).then(() => {
   const index = this.viewCtrl.index;
   this.navCtrl.remove(index);
   });

Ou si vous avez plus d'une page par exemple page1-> page2-> pag3:

this.navCtrl.Push(TabsPage).then(() => {
const index = this.viewCtrl.index;
this.navCtrl.remove(index, 2); //this will remove page3 and page2
});
1
Besart Domazeti
ionViewWillEnter() {
    this.refresh();
}

ionViewWillEnter sera appelé juste avant chaque fois que vous visualisez la page

0
Luca C.