如何在 ionic 2 中保留视图\页面状态？

Question

我有一个 ionic2 应用程序，其中有几页。单击第一页中的按钮时，我导航到第二页并在 ionViewDidLoad（第二页）上，我正在调用数据服务并将数据呈现在列表中。 接下来，当我通过单击顶部的返回按钮向后导航时，我会转到第一页。现在再次，如果我单击第一页中的按钮，我会导航到第二页。但是，在这种情况下，再次进行服务调用，这意味着再次触发 ionViewDidLoad（这是我想要避免的）

如何保留第二个视图的先前状态？我没有使用 setRoot。我正在使用导航器的推送和弹出。

Answer 1

是的，在 push 和 pop 之后在任何页面中重新调用构造函数和 ionViewDidLoad() 是 Ionic 2 中的预期行为（请参阅 discussion on GitHub）。

由于您已经在使用数据服务来获取每个页面的数据，因此您可以将数据保存在那里。如果您有一些耗时的数据加载，例如从数据库中，您可以将加载的数据存储在服务中，并在以下调用中将其返回到页面。

例如在data-service.ts：

public getData() {
   // data already loaded, just return it 
   if (this.data) {
        return Promise.resolve(this.data);
   }
   // data not loaded yet, get it from database
   return new Promise(resolve => {
       ... loading data from database to this.data ....
       resolve(this.data);
   });
}

然后在sample-page.ts：

private initData() {
    this.dataService.getData().then(data => {
        this.data = data;
    });
}