我有2页Page1 and Page2。我在Page2中使用了this.nav.pop()，它将弹出Page2和Page1将启用但我想刷新Page1。先感谢您。
你可以传递父页面和导航推送。这样你可以将父页面作为navParamter。 在父页面中：
goToChildPage() {
this.navCtrl.push(ChildPage, { "parentPage": this });
}
并且在pop之前的子页面中，您可以在父页面上调用函数
this.navParams.get("parentPage").someFnToUpdateParent();
//or
this.navParams.get("parentPage").someFnToRefreshParent();
我遇到了同样的问题，花了很多时间搜索并尝试解决方案。
如果我理解，你的问题是：
第1页有一些从API / Webservice获得的绑定。
有一些输入，当按下后退按钮（弹出）时，你想要保存数据+刷新页面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();
}
可接受的服务：
/* 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!");
}
);
}
}
我希望它可以帮到你!!问任何类似的问题:)
我在一个类似的问题上花了一天半的时间。解决方案真的是反气候。
我将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);
}
这包含所有内容，但我确实看到了Page-1上的刷新。
// Page-2 nav controller page event method
ionViewWillUnload() {
this.formGroup.patchValue(this.formGroup.value);
}
在某些情况下，您可以使用push（）函数而不是pop（）。当您使用push（）函数进入页面时，将重新加载。您也可以从导航中删除page2。
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
});
ionViewWillEnter() {
this.refresh();
}
ionViewWillEnter将在您（重新）可视化页面之前调用
请查看我在此处发布的解决方案：
也许你可以根据自己的需要进行调整。
我的意图的主要目的是防止，将整个模块与this作为navCtrlParam传递到push()的页面，就像之前的一些评论中提到的那样。
希望能帮助到你！
干杯 Unkn0wn0x
忽略这里建议的直接角度实现，特别是因为你正在使用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);
});
您可能希望在页面中实现其中一个：
ionViewWillEnter ionViewDidEnter
请查看navController和页面生命周期文档：http://ionicframework.com/docs/v2/api/components/nav/NavController/
对我有用的简单解决方案是在ionViewDidEnter中再次调用get服务方法
ionViewDidEnter() {
this.loadGetService();
}
在第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();
}
在此处输入代码
你可以考虑在调用this.nav.pop之前发送一个事件让第1页重新加载。
就像Jonathan所说，你可以从ionic-angular导入事件，但你不需要再次推送和弹出，调用你的方法只重新加载内容。
在第2页：
this.events.publish('reloadDetails');
this.navCtrl.pop();
在第1页：
this.events.subscribe('reloadDetails',() => {
//call methods to refresh content
});
这对我行得通。
我只是在第1页的ionViewWillEnter函数中加载细节（使用Ionic 2）。这会在弹出第1页时处理初始加载和任何刷新。
文档是here。
ionViewWillEnter “当页面即将进入并成为活动页面时运行。”
我发现这种技术可以重新加载页面：
this.navCtrl.insert(1, MyPage);
this.navCtrl.pop();