Question

我有一个页面，可以通过多个“父/源”页面进行导航。

类似这样的东西：

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

我需要将第4页的一些数据返回给其父级（原始页）。

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

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

我知道我可以在转到第4页时在其他地方传递原始页的名称，但是它似乎不太正确（您对此有何看法？）。

谢谢。

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

请确保通过Ionic Docs中的 lazy loading section 来查看模态页面应如何被要使用的页面导入。

Answer 2

在向前导航时，已经将原点作为附加项传递了-然后在第4页上将被知道，并且可以用于将附加项返回到特定页面。这非常简单，不需要模态对话框解决方法，而这并不是要求的。

如何导航回去，返回一些数据，而又不知道用户来自哪个页面

2 个答案: