离子页面未缓存

Question

我有两个页面：

首页
关于页面

主页是 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:

View creation

By default, pages are cached and left in the DOM if they are navigated away from but still in the navigation stack (the exiting page on a push() for example). They are destroyed when removed from the navigation stack (on pop() or setRoot()).

ionViewDidLoad

Runs when the page has loaded. This event only happens once per page being created. If a page leaves but is cached, then this event will not fire again on a subsequent viewing. The ionViewDidLoad event is good place to put your setup code for the page.

Answer 1

因为如果您使用导航栏导航回主页，则会使用 pop() 方法。如果您在 AboutPage 上使用 push('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

离子页面未缓存

Ionic pages not cached

navigation

lifecycle

caching

ionic-framework