Javascript 如何在 ionic2 中的 pop() 之后重新加载离子页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36325641/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to reload the ion-page after pop() in ionic2
提问by Akash Rao
I have 2 pages Page1 and Page2. I have used this.nav.pop()in Page2 and it will pop the Page2 and Page1 will enable but i want to refresh the Page1.
Thank you in advance.
我有 2 页Page1 and Page2。我this.nav.pop()在 Page2 中使用过，它会弹出 Page2，Page1 将启用，但我想刷新 Page1。先感谢您。
回答by noel zubin
you could pass the parent page along with the nav push. that way you could accces the parent page as a navParamter.
in parent page:
您可以将父页面与导航推送一起传递。这样您就可以将父页面作为导航参数访问。
在父页面中：
goToChildPage() {
this.navCtrl.push(ChildPage, { "parentPage": this });
}
and in the child pagebefore pop you could call functions on parent page
在弹出之前的子页面中，您可以在父页面上调用函数
this.navParams.get("parentPage").someFnToUpdateParent();
//or
this.navParams.get("parentPage").someFnToRefreshParent();
回答by Jonathan Bardi
Ignore the direct angular implementations suggested here, especially since you are using Ionic 2 and the suggestions are assuming Ionic 1. Don't start mixing too much of direct angular in your ionic app unless there is no ionic implementation for what you need. Import "Events" from ionic/angular2 in both Page1 and Page2, then in Page2 do something like
忽略此处建议的直接角度实现，特别是因为您使用的是 Ionic 2 并且建议假设 Ionic 1。不要在您的 ionic 应用程序中开始混合过多的直接角度，除非没有您需要的离子实现。在 Page1 和 Page2 中从 ionic/angular2 导入“Events”，然后在 Page2 中执行类似的操作
this.events.publish('reloadPage1');
this.nav.pop();
And in Page1 put
并在第 1 页放
this.events.subscribe('reloadPage1',() => {
this.nav.pop();
this.nav.push(Page1);
});
回答by user2674268
You may want to implement one of these in your page:
您可能希望在您的页面中实现以下其中一项：
ionViewWillEnter ionViewDidEnter
ionViewWillEnter ionViewDidEnter
Please review the navController and page lifecycle documentation: http://ionicframework.com/docs/v2/api/components/nav/NavController/
请查看 navController 和页面生命周期文档：http://ionicframework.com/docs/v2/api/components/nav/NavController/
回答by Marko
Simple solution that worked for me was calling the get service method again in ionViewDidEnter
对我有用的简单解决方案是在ionViewDidEnter 中再次调用 get 服务方法
ionViewDidEnter() {
this.loadGetService();
}
回答by Silver Wing
On PAGE 1:
在第 1 页：
import { Events } from 'ionic-angular'
constructor(public events:Events){
this.listenEvents();
}
... ...
listenEvents(){
this.events.subscribe('reloadDetails',() => {
//call methods to refresh content
});
}
On PAGE 2:
在第 2 页：
import { Events } from 'ionic-angular'
constructor(public events:Events, public navCtrl:NavController){
}
function(){
this.events.publish('reloadDetails');
this.navCtrl.pop();
}
enter code here
在此处输入代码
回答by gucheen
You may consider send an event before call this.nav.popto let page 1 reload itself.
您可以考虑在调用之前发送一个事件this.nav.pop，让第 1 页重新加载自身。
回答by AndrWeisR
I simply load the details in page 1 in an ionViewWillEnter function (using Ionic 2). This handles both the initial load and any refresh when popping back to page 1.
我只是在 ionViewWillEnter 函数中加载第 1 页中的详细信息（使用 Ionic 2）。这将处理初始加载和弹回第 1 页时的任何刷新。
Documentation is here.
文档在这里。
ionViewWillEnter
"Runs when the page is about to enter and become the active page."
ionViewWillEnter
“当页面即将进入并成为活动页面时运行。”
回答by Dave
Like Jonathan said, you can import Events from ionic-angular, but you don't need push and pop again, call your methods to reload only the content.
就像乔纳森说的，你可以从 ionic-angular 导入事件，但你不需要再次推送和弹出，调用你的方法只重新加载内容。
In page2:
在第 2 页：
this.events.publish('reloadDetails');
this.navCtrl.pop();
In page1:
在第 1 页：
this.events.subscribe('reloadDetails',() => {
//call methods to refresh content
});
That works for me.
这对我行得通。
回答by SiteXw
I found this technique to reload a page:
我发现了这种重新加载页面的技术：
this.navCtrl.insert(1, MyPage);
this.navCtrl.pop();
回答by gtamborero
I had the same problem and spend many hours searching and trying the solution.
我遇到了同样的问题，花了很多时间搜索和尝试解决方案。
If I understand, your problem is:
如果我明白，你的问题是：
Page 1 have some bindings that you get from an API / Webservice.
第 1 页有一些您从 API/Web 服务获得的绑定。
Page 2 have some inputs and when pushing the back button (pop) you want to SAVE data + refresh the Page 1 bindings.
第 2 页有一些输入，当按下后退按钮 (pop) 时，您要保存数据 + 刷新第 1 页绑定。
The way I solved it has been reading a post on StackOverflow that now I can't find :( !!
我解决它的方法是在 StackOverflow 上阅读一篇文章，现在我找不到 :( !!
The solution is using an Injectable Service.
解决方案是使用可注射服务。
PAGE 1:
第 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
);
});
}
}
PAGE 2:
第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!");
}
);
}
}
I hope it can help you!! Ask for any similar problems :)
希望能帮到你！！询问任何类似的问题:)
