如何从Ionic推送的视图返回更新后的数据？

我来帮你搞定这个问题！你之前用模态框的onDidDismiss回传数据的思路很顺畅，但对于navCtrl.push跳转的页面，处理逻辑会不一样——因为这是导航栈内的页面跳转，不是模态框的弹出/关闭逻辑，之前尝试的viewDidLeave没用是因为它触发的时机不对。

第一步：在编辑页面（ItemUpdatePage）传递更新后的数据 #

当用户完成编辑操作后，你需要把更新后的item通过navCtrl.pop()传递回根视图。比如写一个保存更新的方法：

saveUpdatedItem() {
  // 从NavParams拿到原始待编辑的item，合并用户更新后的字段
  const originalItem = this.navParams.get('item');
  const updatedItem = {
    ...originalItem, // 保留原item的id等不变的属性
    name: this.name, // 这里是你编辑页面绑定的更新后的值
    description: this.description,
    status: this.status,
    // 如果需要更新日期，也可以在这里处理
    date: this.datepipe.transform(new Date(), 'MM-dd-yy')
  };

  // 传递更新后的数据并返回根视图
  this.navCtrl.pop(updatedItem);
}

第二步：在根视图接收并更新数组 #

viewDidLeave是根视图被跳走时触发的，根本拿不到返回的数据。我们可以用ionViewWillEnter生命周期钩子——每次根视图被重新进入（从编辑页面返回时）就检查是否有更新的数据，然后更新数组：

ionViewWillEnter() {
  // 获取上一个页面（编辑页面）传递回来的更新数据
  const updatedItem = this.navCtrl.getPrevious()?.data;
  
  if (updatedItem) {
    // 在items数组中找到对应id的元素，替换成更新后的版本
    const itemIndex = this.items.findIndex(item => item.id === updatedItem.id);
    if (itemIndex !== -1) {
      this.items[itemIndex] = updatedItem;
      // 如果需要做本地存储等后续操作，也可以在这里调用对应的方法
    }
  }
}

这样就能完美实现从编辑页面返回后，自动更新根视图的数组元素了。

内容的提问来源于stack exchange，提问作者Jonathan Small