如何在ionic2中的pop（）之后重新加载离子页面
Posted
技术标签:
【中文标题】如何在ionic2中的pop（）之后重新加载离子页面【英文标题】：How to reload the ion-page after pop() in ionic2 【发布时间】：2016-07-19 10:46:17 【问题描述】：我有 2 页 Page1 and Page2。我在 Page2 中使用了this.nav.pop()，它会弹出 Page2 并且 Page1 将启用，但我想刷新 Page1。
先感谢您。
【问题讨论】：
this.nav.pop() 用于？
this.nav.pop() 用于弹出Page2
@AkashRao 你是在刷新整个页面后还是只是页面中的数据？我问的原因是，Angular 2 已经投入了大量工作，只更新 DOM，当它需要更新时，刷新整个页面可能会过大，具体取决于您要实现的目标。
有一个解决方案here，当您重新进入允许您刷新数据的页面时会调用 onPageWillEnter。希望这会有所帮助。
【参考方案1】：
您可以将父页面与导航推送一起传递。这样您就可以将父页面作为 navParamter 访问。 在父页面中：
goToChildPage()
this.navCtrl.push(ChildPage, "parentPage": this );
在弹出之前的子页面中，您可以调用父页面上的函数
this.navParams.get("parentPage").someFnToUpdateParent();
//or
this.navParams.get("parentPage").someFnToRefreshParent();
【讨论】：
谢谢！解决这个问题的最佳方法，恭喜！ 太棒了，谢谢！ 我尝试使用参数调用父页面的函数，但没有成功。似乎它没有通过args。但没有争论是一种魅力。顺便说一句，我从来不知道我们可以通过这种方式调用 Pages 上的函数。谢谢。 这个解决方案正在打破 OOP，订阅->发布事件或通过页面生命周期事件 ionViewDidEnter 我猜应该是理想的选择 @Naga 我刚试过这个。你是对的，它似乎确实是理想的选择。这是下面其他人提到的解决方案。【参考方案2】：忽略此处建议的直接角度实现，特别是因为您使用的是 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);
);
【讨论】：
这可行，但让 UI 从 Page1 闪回一个页面然后再次前进到 page1 看起来不太好 这是一个很好的解决方案，但subscribe 中的pop、push 不是。相反，您可以在 Page1 中有一个初始化函数，您可以在 subscribe 中调用它。【参考方案3】：
您可能希望在您的页面中实现其中之一：
ionViewWillEnter ionViewDidEnter
请查看 navController 和页面生命周期文档： http://ionicframework.com/docs/v2/api/components/nav/NavController/
【讨论】：
ionViewWillEnter ionViewDidEnter 在“弹出”（后退按钮）时不起作用，所以我认为这不是一个好选择 ionViewWillEnter 非常感谢推送和弹出操作【参考方案4】：对我有用的简单解决方案是在 ionViewDidEnter
中再次调用 get 服务方法ionViewDidEnter()
this.loadGetService();
【讨论】：
很好的解决方案。虽然 ionViewDidEnter 不需要返回任何东西。这是一个空白。【参考方案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 之前发送一个事件，让页面 1 自行重新加载。
【讨论】：
嗨，gucheen，你能给我看一个在pop之前调用事件的示例代码吗？ 就像在 Angular 中一样，在第 2 页使用 $emit，在第 1 页使用 $on【参考方案7】：就像乔纳森说的，你可以从 ionic-angular 导入事件，但你不需要再次推送和弹出，调用你的方法来只重新加载内容。
在第 2 页中：
this.events.publish('reloadDetails');
this.navCtrl.pop();
在第 1 页：
this.events.subscribe('reloadDetails',() =>
//call methods to refresh content
);
这对我有用。
【讨论】：
【参考方案8】：我只是在 ionViewWillEnter 函数中加载第 1 页中的详细信息（使用 Ionic 2）。这将处理初始加载和弹回第 1 页时的任何刷新。
文档是here。
ionViewWillEnter "在页面即将进入并成为活动页面时运行。"
【讨论】：
【参考方案9】：我发现了这种重新加载页面的技术：
this.navCtrl.insert(1, MyPage);
this.navCtrl.pop();
【讨论】：
哟，你到底是从哪里得到你的参数的？如果您有想要再次使用的计算参数，您会怎么做？您的回答不是解决方案，任何人都不应该根据他的要求使用此代码！ 我认为最好的解决方案是复制收到的参数并将它们重新注入“插入”（this.navCtrl.insert(1, MyPage, paramsCopy);）。
我认为它在大多数情况下仍然无法使用，您需要重新初始化整个控制器。【参考方案10】：
我遇到了同样的问题，花了很多时间寻找和尝试解决方案。
如果我理解，您的问题是：
第 1 页有一些您从 API/Web 服务获得的绑定。
第 2 页有一些输入，当按下返回按钮 (pop) 时，您想要保存数据 + 刷新第 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();
注射服务：
/* 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!");
);
希望对你有帮助！！询问任何类似的问题:)
【讨论】：
【参考方案11】：我在一个类似的问题上花了一天半的时间。解决方案真的是反气候。
我将 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);
【讨论】：
【参考方案12】：在某些情况下，您可以使用 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
);
【讨论】：
【参考方案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 传递到push() 的页面中，就像之前在某些cmets 中提到的那样。
希望对你有帮助！
干杯 未知0wn0x
【讨论】：
以上是关于如何在ionic2中的pop（）之后重新加载离子页面的主要内容，如果未能解决你的问题，请参考以下文章