我有 2 页 Page1 and Page2。我在 Page2 中使用了this.nav.pop()，它会弹出 Page2 并且 Page1 将启用，但我想刷新 Page1。
先感谢您。
【问题讨论】：
this.nav.pop() 用于？
标签： javascript angular ionic2
您可以将父页面与导航推送一起传递。这样您就可以将父页面作为 navParamter 访问。
在父页面中：
goToChildPage() {
this.navCtrl.push(ChildPage, { "parentPage": this });
}
在弹出之前的子页面中，您可以调用父页面上的函数
this.navParams.get("parentPage").someFnToUpdateParent();
//or
this.navParams.get("parentPage").someFnToRefreshParent();
【讨论】：
忽略此处建议的直接角度实现，特别是因为您使用的是 Ionic 2 并且建议假设 Ionic 1。不要开始在您的 ionic 应用程序中混合太多直接角度，除非没有您需要的 ionic 实现.在 Page1 和 Page2 中从 ionic/angular2 导入“事件”，然后在 Page2 中执行类似
this.events.publish('reloadPage1');
this.nav.pop();
在第1页放
this.events.subscribe('reloadPage1',() => {
this.nav.pop();
this.nav.push(Page1);
});
【讨论】：
subscribe 中的pop、push 不是。相反，您可以在 Page1 中有一个初始化函数，您可以在 subscribe 中调用它。
您可能希望在您的页面中实现其中之一：
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 自行重新加载。
【讨论】：
就像乔纳森说的，你可以从 ionic-angular 导入事件，但你不需要再次推送和弹出，调用你的方法来只重新加载内容。
在第 2 页中：
this.events.publish('reloadDetails');
this.navCtrl.pop();
在第 1 页：
this.events.subscribe('reloadDetails',() => {
//call methods to refresh content
});
这对我有用。
【讨论】：
我只是在 ionViewWillEnter 函数中加载第 1 页中的详细信息（使用 Ionic 2）。这将处理初始加载和弹回第 1 页时的任何刷新。
文档是here。
ionViewWillEnter
"在页面即将进入并成为活动页面时运行。"
【讨论】：
我发现了这种重新加载页面的技术：
this.navCtrl.insert(1, MyPage);
this.navCtrl.pop();
【讨论】：
this.navCtrl.insert(1, MyPage, paramsCopy});）。
我遇到了同样的问题，花了很多时间寻找和尝试解决方案。
如果我理解，您的问题是：
第 1 页有一些您从 API/Web 服务获得的绑定。
第 2 页有一些输入，当按下返回按钮 (pop) 时，您想要保存数据 + 刷新第 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'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 从第 1 页传递到第 2 页。我更新了 Page-2 中的 FormGroup 值。当我弹出第 2 页时，第 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);
}
【讨论】：
在某些情况下，您可以使用 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() 的页面中，就像之前在某些cmets 中提到的那样。
希望对你有帮助！
干杯
未知0wn0x
【讨论】：