Как перезагрузить ионную страницу после pop() в ionic2

Ответ 1

вы можете передать родительскую страницу вместе с навигационным нажатием. таким образом, вы можете перенести родительскую страницу как navParamter.
на родительской странице:

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

а на дочерней странице перед попсом вы можете вызывать функции на родительской странице

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

Ответ 2

Игнорируйте прямые версии angular, предложенные здесь, тем более, что вы используете Ionic 2, и предложения предполагают Ionic 1. Не начинайте смешивать слишком много прямого angular в вашем ионном приложении, если нет ионной реализации для чего вам нужно. Импортируйте "События" из ионного /angular2 на страницах Page1 и Page2, затем в Page2 сделайте что-то вроде

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

И в Page1 поместите

this.events.subscribe('reloadPage1',() => {
 this.nav.pop();
 this.nav.push(Page1);
});

Ответ 3

Возможно, вы захотите реализовать одну из них на своей странице:

ionViewWillEnter ionViewDidEnter

Просмотрите документацию по NavController и жизненному циклу страницы: http://ionicframework.com/docs/v2/api/components/nav/NavController/

Ответ 4

Простое решение, которое сработало для меня, снова вызывало метод get service в ionViewDidEnter

ionViewDidEnter() {
    this.loadGetService();
}

Ответ 5

На странице 1:

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

На странице 2:

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

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

введите здесь код

Ответ 6

Вы можете отправить сообщение перед вызовом this.nav.pop, чтобы перезагрузить страницу.

Ответ 7

Как сказал Джонатан, вы можете импортировать Events from ionic- angular, но вам не нужно снова нажать и снова нажать, вызвать ваши методы, чтобы перезагрузить только контент.

В стр. 2:

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

В стр. 1:

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

Это работает для меня.

Ответ 8

Я просто загружаю детали на стр. 1 в функцию ionViewWillEnter (используя Ionic 2). Это относится как к начальной загрузке, так и к любому обновлению при возврате на страницу 1.

Документация здесь.

ionViewWillEnter
"Выполняется, когда страница собирается войти и стать активной страницей".

Ответ 9

Я нашел эту технику для перезагрузки страницы:

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

Ответ 10

У меня была такая же проблема, и я потратил много часов на поиск и попытку решения.

Если я понимаю, ваша проблема:

Page 1 имеют некоторые привязки, которые вы получаете от API/Webservice.

Page 2 имеют некоторые входы, и при нажатии кнопки "Назад" (поп) вы хотите сохранить данные + обновить привязки Page 1.

Как я решил, он читал сообщение в StackOverflow, которое теперь я не могу найти:(!!

В решении используется Инъекционная услуга.

СТРАНИЦА 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();
  }

ИНЖЕКТИВНОЕ ОБСЛУЖИВАНИЕ:

/* 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
      );
    });
  }
}

СТРАНИЦА 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 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!"); 
        }
       );
    }
}

Надеюсь, это поможет вам! Задайте любые аналогичные проблемы:)

Ответ 11

Я провел полтора дня по аналогичной проблеме. Решение действительно антиклиматическое.

Я передаю FormGroup с Страница-1 на страницу-2. Я обновляю значения FormGroup на странице-2. Когда я появляю страницу-2, форма Page-1 не обновляется новыми значениями. Он не следил за изменениями.

Чтобы исправить это, я исправляю FormGroup самостоятельно после того, как Страница-2 была выскочена, но все еще находится в компоненте Страница-2.

Это более отзывчиво, но требует прямого вызова close().

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

Все это охватывает, но я вижу обновление на странице-1.

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

Ответ 12

В некоторых ситуациях вместо pop() вы можете использовать функцию push(). Когда вы вводите страницу с помощью функции push(), она перезагружается. Также вы можете удалить страницу2 из навигации.

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

Или, если у вас более одной страницы, например page1- > page2- > pag3:

this.navCtrl.push(TabsPage).then(() => {
const index = this.viewCtrl.index;
this.navCtrl.remove(index, 2); //this will remove page3 and page2
});

Ответ 13

ionViewWillEnter() {
    this.refresh();
}

ionViewWillEnter будет вызываться как раз перед тем, как вы (ре) визуализируете страницу

Ответ 14

Пожалуйста, проверьте мое решение, которое я разместил здесь:

• https://forum.ionicframework.com/t/ionviewdidenter-is-not-invoked-on-leaving-a-pushed-page/131144/19?u=unkn0wn0x

Может быть, вы можете адаптировать его к вашим потребностям.

Основная цель моего намерения состояла в том, чтобы предотвратить передачу целого модуля с this именем navCtrlParam на navCtrlParam push(), как это было упомянуто в некоторых комментариях ранее.

Надеюсь, поможет!

ура
Unkn0wn0x