Question

我有2页Page1 and Page2。我在Page2中使用了this.nav.pop()，它将弹出Page2，Page1将启用，但我想刷新Page1。先感谢您。

Answer 1

您可以将父页面与导航推送一起传递。这样你可以将父页面作为navParamter。
父页面中的：

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

并且在弹出之前的子页面中，您可以调用父页面上的函数

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

Answer 2

忽略这里建议的直接角度实现，特别是因为你正在使用Ionic 2并且建议假设离子1.不要在你的离子应用程序中开始混合过多的直接角度，除非没有离子实现你需要什么。从Page1和Page2中的ionic / angular2导入“事件”，然后在Page2中执行类似

的操作

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

在Page1中放

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

Answer 3

您可能希望在页面中实现其中一个：

ionViewWillEnter ionViewDidEnter

请查看navController和页面生命周期文档： http://ionicframework.com/docs/v2/api/components/nav/NavController/

Answer 4

对我有用的简单解决方案是在 ionViewDidEnter

中再次调用get服务方法

ionViewDidEnter() {
    this.loadGetService();
}

Answer 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();
}

在这里输入代码

Answer 6

您可以考虑在致电this.nav.pop之前发送一个事件，让第1页重新加载。

Answer 7

就像Jonathan所说，你可以从ionic-angular导入事件，但你不需要再次推送和弹出，调用你的方法只重新加载内容。

在第2页：

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

在第1页：

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

这适合我。

Answer 8

我只是在第1页的ionViewWillEnter函数中加载细节（使用Ionic 2）。这会在弹回第1页时处理初始加载和任何刷新。

文档为here。

ionViewWillEnter
＆＃34;当页面即将进入并成为活动页面时运行。＆＃34;

Answer 9

我发现这种技术可以重新加载页面：

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

Answer 10

我遇到了同样的问题，花了很多时间搜索并尝试解决方案。

如果我理解，你的问题是：

第1页有一些从API / Web服务获得的绑定。

有一些输入，当按下后退按钮（弹出）时，你想要保存数据+刷新页面1绑定。

我解决它的方式一直在读StackOverflow上的帖子，现在我找不到了:( !!

解决方案是使用Injectable Service。

第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();
  }

INJECTABLE SERVICE：

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

我希望它可以帮到你!!要求任何类似的问题：）

Answer 11

我在一个类似的问题上花了一天半的时间。解决方案真的是反气候。

我将FormGroup从Page-1传递到Page-2。我更新了Page-2中的FormGroup值。当我弹出Page-2时，Page-1的表单不会使用新值更新。它还没有注意到变化。

为了解决这个问题，我在弹出Page-2但仍然在Page-2组件中后，自行修补FormGroup。

响应速度更快，但需要直接调用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);
}

Answer 12

在某些情况下，您可以使用push（）函数代替pop（）。当您使用push（）函数进入页面时，将重新加载。您也可以从导航中删除page2。

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

或者，如果您有多个页面，例如page1-＆gt; page2-＆gt; pag3：

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

Answer 13

ionViewWillEnter() {
    this.refresh();
}

ionViewWillEnter将在您（重新）可视化页面之前调用

Answer 14

请签出我在此处发布的解决方案：

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

也许您可以使其适应您的需求。

我的主要目的是防止将this作为navCtrlParam的整个模块传递到push()的页面中，就像之前在一些注释中提到的那样。

希望有帮助！

干杯
Unkn0wn0x

如何在ionic2中的pop（）之后重新加载离子页面

14 个答案: