离子页面未缓存答案

【问题标题】：Ionic pages not cached离子页面未缓存
【发布时间】：2018-04-08 18:56:09
【问题描述】：

我有两页：

首页
关于页面

HomePage 是 rootPage。

在启动时调用HomePage#ionViewDidLoad。我使用 NavController 从 HomePage 导航到 AboutPage：

navigateToAbout(): void {
   this.navCtrl.push('AboutPage');
}

每次我导航到 AboutPage 时，都会调用 AboutPage#ionViewDidLoad。如果我使用ion-navbar 导航回到主页，HomePage#ionViewDidLoad 会被不调用，但如果我使用navCtrl.push('HomePage')，HomePage#ionViewDidLoad 会再次被调用。

有人可以解释一下，如果我使用navCtrl.push(...)，为什么每次都会调用 ionViewDidLoad。根据Ionic NavController Doc，页面应该被缓存并且 ionViewDidLoad 每个页面应该只调用一次：

视图创建

默认情况下，如果页面被导航，页面会被缓存并留在 DOM 中远离但仍在导航堆栈中（a 上的退出页面推（）例如）。它们在从导航堆栈（在 pop() 或 setRoot() 上）。

ionViewDidLoad

页面加载后运行。此事件仅发生每页创建一次。如果页面离开但被缓存，那么这个事件不会在随后的查看中再次触发。 ionViewDidLoad 事件是放置页面设置代码的好地方。

【问题讨论】：

标签： caching ionic-framework navigation lifecycle

【解决方案1】：

因为如果您使用导航栏导航回主页，则使用pop() 方法。如果您在 AboutPage 上使用 push('HomePage')，您将创建一个新的 HomePage 实例，然后调用 ionViewDidLoad()。

仅缓存已在导航堆栈上的页面（如第一次推送 AboutPage 时的主页），但推送到导航堆栈的页面始终是新创建的。

也许这个例子有助于形象化：

1.启动后的初始状态：

[HomePage]

2. nav.push('AboutPage')之后的状态：

[HomePage, AboutPage]
 ^^^^^^^^
  cached

3.说明您是否使用导航栏向后导航或pop()：

[HomePage] // The cached instance is used so ionViewDidLoad() is not called

4.说明第二步后是否使用.push('HomePage')：

[HomePage, AboutPage, HomePage] // a new instance is created so ionViewDidLoad() is called
 ^^^^^^^^  ^^^^^^^^^
  cached    cached

【讨论】：