Question

我有一个“查看项目列表”页面和一个“查看项目详细信息”页面。在“查看项目列表”页面上，我正在使用navCtrl.push（'viewItemDetails'）。在项目详细信息页面上，用户可以更改某些内容，然后单击“返回”。

我想做的是当用户从详细信息页面回来时刷新“查看项目列表”页面。

我尝试过：

在“列表”页面上使用ionViewDidLoad（）-用户单击“后退”时永远不会触发。
通过navparams传入回调函数，该函数从ionViewDidLeave（）事件的“详细信息”页面调用。该函数会执行，但是所有成员在“列表”页面上均未定义，因此不会执行我想要的操作。

一种选择可能是在商品列表页面上使用可观察对象，但是我真的很想在可能的情况下使用生命周期事件来实现这一点。

有什么想法吗？

Answer 1

2个选项：

使用ModalController而不是NavController，那么您便知道何时取消模态：ModalController。
将Events与ionViewDidLeave结合使用。

详细信息页面

import { Events } from 'ionic-angular';

constructor(
    private events: Events,
) {
}

ionViewDidLeave() {
    let data = { id: 123 };
    this.events.publish('list-page:refresh', data);
}

列表页面

您可以在进行推送之前订阅活动。并在收到事件数据后退订。

import { Events } from 'ionic-angular';

  constructor(
        private events: Events,
    ) { }

public goToDetail(yourData): void {
    this.events.subscribe('list-page:refresh', (data) => {
        this.yourRefreshMethod(data);
    });
    this.navCtrl.push('your-view', yourData);
}

public yourRefreshMethod(data): void {
    // your code to refresh the page.
    this.events.unsubscribe('list-page:refresh');
}

如您所见，在进入详细信息页面（如有需要，可带有参数）之前，它将预订事件以进行刷新。当您进入详细信息页面时（离开时），它将使用所需的任何数据触发事件。

离开后，将在“ ListPage”中触发事件，该事件将使用您发送的所有数据调用yourRefreshMethod。

离子框架3-检测上一页的``后退''事件

1 个答案: