Ionic framework 离子框架3-检测和x27；背面'；上一页上的事件

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

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

我试过：

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

一种选择可能是在项目列表页面上使用可观察项，但如果可能的话，我真的很想使用生命周期事件

有什么想法吗？

2个选项：

使用ModalController而不是NavController，这样您就知道模态何时被解除：

与

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,
) {
}

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');
}

如您所见，在转到详细信息页面（如果愿意，可以使用params）之前，它将订阅事件以进行刷新。当您进入“详细信息”页面时，当它离开时，它会使用您想要的任何数据触发事件

离开后，该事件在“ListPage”中触发，它将调用

yourRefreshMethod

，使用您发送的任何数据。

2选项：

使用ModalController而不是NavController，这样您就知道模态何时被解除：

与

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,
) {
}

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');
}

如您所见，在转到详细信息页面（如果愿意，可以使用params）之前，它将订阅事件以进行刷新。当您进入“详细信息”页面时，当它离开时，它会使用您想要的任何数据触发事件

---

离开后，事件在“ListPage”中触发，它将调用

yourRefreshMethod

，使用您发送的任何数据。

详细信息页面以前是一个模式页面，但它太大了，因此我将其设置为一个适当的页面。基于事件的解决方案非常有效，谢谢！细节页面以前是一个模式页面，但是它太大了，所以我把它做成了一个合适的页面。基于事件的解决方案非常有效，谢谢！