如何在 Ionic 3 中的页面弹出上执行回调？

Question

我试图在页面被关闭后从页面获取一些数据。由于NavController.pop 不允许指定任何参数，我正在尝试使用回调。

调用页面代码：

export class HomePage {

    constructor(
        private navCtrl: NavController,
        private articleService: ArticleService) {
    }

// this is called on second page's dismiss
onArticleFiltersDismissed(data: ArticleListFilterModel) {

    return new Promise((resolve, reject) => {
        if (!data) {
            console.log("No data from page ArticleFilterPage");
            return;
        }

        console.log("Dismissed page ArticleFilterPage with data ", data);
        console.log("This: ", this);

        // "this" does not points to a reference of this page 
        this.filterData = data;
        this.loadArticleBriefData(data);

        resolve();
    });
}        

// this shows the second Page and provides the callback as a parameter
onShowFilter(event: MouseEvent) {
    const filterPage = this.navCtrl.push(ArticleFilterPage, { filters: this.filterData, callback: this.onArticleFiltersDismissed });

}

private loadArticleBriefData(filters: ArticleListFilterModel) {
     // load data here
}

第二个页面（即被推送到主页）代码如下：

export class ArticleFilterPage {

    dismiss(filter: ArticleListFilterModel) {

        this.callback(filter).then(() => {
            this.navCtrl.pop();
        });
    }

}

当调用ArticleFilterPage.dismiss 函数时，它会获得正确的输入，但这指向ArticleFilterPage 引用而不是HomePage，因此我收到以下错误消息：

ERROR 错误：未捕获（承诺）：TypeError： _this.loadArticleBriefData is not a function TypeError: _this.loadArticleBriefData is not a function

问题：如何正确地将第二页的数据传输到第一页？

注意：我知道使用模态更简单，但是第二个页面已经打开了一个模态，并且模态在模态上似乎无法正常工作（第二个模态的关闭也会关闭第一个）。 em>

Answer 1

我的问题仍然存在，尽管它是 XY problem 的一个实例，因为我最初的问题与第二个模态解雇有关，也解雇了第一个。

问题的可能答案

使用events 是一种可能的解决方案。第二页发布如下事件：

this.events.publish('on-article-filter-selected', this.filterData);

第一页订阅了这个事件：

constructor(public events: Events) {
  events.subscribe('on-article-filter-selected', (filterData) => {

    this.reloadStuff(filterData);
  });
}

但是，我不喜欢这个解决方案，因为它依赖于在应用程序级别“飞来飞去”的事件：

Events 是一个发布-订阅风格的事件系统，用于发送和 响应您的应用中的应用级事件

我原来的问题

打开第二个模式（第三页）的按钮是Form 的一部分。默认情况下，button behaves as a submit，所以我的错误是没有指定类型（button）。

单击按钮关闭第一个模态并同时打开第二个模态，这就是为什么我觉得第二个模态的解除关闭了两个模态。

最方便的解决方案是有两个模态，因为它们自然允许来回发送信息。