ionic-framework - 如何在 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 Error: Uncaught (in promise): TypeError: _this.loadArticleBriefData is not a function TypeError: _this.loadArticleBriefData is not a function

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

注意:我知道使用模态更直接，但是第二页已经打开了模态，模态上的模态似乎不能正常工作(第二个模态的关闭也会关闭第一个)。

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 is a publish-subscribe style event system for sending and responding to application-level events across your app

我原来的问题

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

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

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