navigation - 如何在不知道用户来自哪个页面的情况下向后导航，返回一些数据

Question

我有一个页面可以被多个“父/源”页面导航到。

像这样:

Page 1 \
        \
Page 2 -- Page 4
        /
Page 3 /

我需要从第 4 页返回一些数据到它的父页面(原始页面)。

我一直在使用 this.navCtrl.back() 来返回应用程序的其余部分，但是这次我需要返回一些数据，而且似乎无法使用这个功能。

我知道可以使用 this.navCtrl.navigateBack(['page-1'], extras) 传递数据，但我需要知道用户来自哪个页面。有什么简单的方法可以做到这一点吗？

我知道我可以在转到第 4 页时在 extras 上传递原始页面的名称，但它似乎不太正确(您的意见是什么？)。

提前致谢。

Answer 1

正如我在评论中所说，这看起来是使用 modals 的完美方案 。这样 Page 4 就可以将数据返回给调用者，即使不知道是哪个页面创建/呈现它。

代码可能是这样的:

第 1 页/第 2 页/第 3 页:

// Angular
import { Component } from '@angular/core';

// Ionic
import { ModalController, OverlayEventDetail } from '@ionic/angular';

// Modal page
import { ModalPage } from '../modal/modal.page';

@Component({ ... })
export class ModalExample {
  constructor(public modalController: ModalController) {}

  async presentModal() {
    // create the modal
    const modal = await this.modalController.create({
        component: ModalPage,
        componentProps: {
            'firstName': 'Douglas',
            'lastName': 'Adams',
            'middleInitial': 'N'
        }
    });

    // handle the data returned by the modal
    modal.onDidDismiss().then((detail: OverlayEventDetail) => {
      if (detail !== null) {
        console.log('The result: ', detail.data);
      }
    });

    // present the modal
    return await modal.present();
  }
}

第 4 页

// Angular
import { Component, Input } from '@angular/core';

// Ionic
import { NavParams } from '@ionic/angular';

@Component({ ... })
export class ModalPage {

  // Data passed in by componentProps
  @Input() firstName: string;
  @Input() lastName: string;
  @Input() middleInitial: string;

  constructor(navParams: NavParams) {
    // componentProps can also be accessed at construction time using NavParams
    console.log(navParams.get('firstName');
  }

  dismiss() {
    // using the injected ModalController this page
    // can "dismiss" itself and optionally pass back data
    this.modalCtrl.dismiss({
      'dismissed': true
    });
  }
}

请确保通过 lazy loading section 从 Ionic 文档中查看模态页面应如何由将要使用它的页面导入。