How to execute callback on page pop in Ionic 3?

Question

I am trying to get some data from a page after it is dismissed. Since NavController.pop does not allow to specify any parameters, I am trying to use a callback.

Calling page code:

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
}

The second page (that is pushed over HomePage) code is the following:

export class ArticleFilterPage {

    dismiss(filter: ArticleListFilterModel) {

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

}

When ArticleFilterPage.dismiss function is called, it gets the correct input, but this points to a ArticleFilterPage reference instead of HomePage, so I receive the following error message:

ERROR Error: Uncaught (in promise): TypeError: _this.loadArticleBriefData is not a function TypeError: _this.loadArticleBriefData is not a function

Question: How can I properly transfer second page's data to the first page?

Note: I know that using a modal is more straightforward, but the second page already opens a modal and modal over modal does not seem to work properly (second modal's dismiss will also close the first one).

Answer 1

My question still stands, although it is an instance of XY problem, since my original problem was related to the second modal dismissal also dismissing the first one.

Possible answer for the question

Using events is a possible solution. Second page publishes an event like:

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

and the first page subscribes to this event:

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

    this.reloadStuff(filterData);
  });
}

However, I am not fond about this solution since it relies on events "flying" around at application level:

Events is a publish-subscribe style event system for sending and responding to application-level events across your app

My original problem

The button opening the second modal (third page) was part of a Form. By default, a button behaves as a submit, so I the mistake as not specifying the type (button).

Clicking the button closed the first modal and opened the second one in the same time, that's why I got the impression that second modal's dismissal closed both modals.

The most convenient solution is to have two modals, since they naturally allow to send information back and forth.