Ionic 3 TypeScript：页面间如何按值传递对象解决引用更新问题

你猜的完全正确！这个问题根源就是对象的引用传递特性——当你把列表里的recipe对象直接传给更新页时，页面上的双向绑定（比如[(ngModel)]）其实是在直接修改原对象的属性，哪怕你没点更新按钮，原列表里的对象已经被改动了。要解决这个问题，关键是在传递对象时创建一个独立的副本，让更新页操作这个副本，只有用户确认更新后，再把副本的内容同步回原数据源。

方法1：浅拷贝（适合无嵌套结构的对象） #

如果你的recipe对象是简单的扁平结构（没有嵌套的数组或子对象），可以用Object.assign()或者ES6展开运算符快速创建浅拷贝：

用Object.assign()创建副本 #

在列表页的跳转方法里，把原对象拷贝后再传递：

// recipes.ts 列表页组件的跳转逻辑
goToUpdatePage(recipe: any) {
  // 创建原对象的浅拷贝
  const recipeCopy = Object.assign({}, recipe);
  // 传递拷贝后的对象到更新页
  this.navCtrl.push('RecipePage', { recipe: recipeCopy });
}

用ES6展开运算符（更简洁） #

同样是浅拷贝，写法更清爽：

const recipeCopy = { ...recipe };
this.navCtrl.push('RecipePage', { recipe: recipeCopy });

方法2：深拷贝（适合有嵌套结构的对象） #

如果recipe里包含嵌套的数组（比如ingredients数组）或者子对象，浅拷贝只会复制外层对象的引用，嵌套部分还是会和原对象共享。这时候需要用深拷贝，最常用的简便方法是通过JSON序列化/反序列化：

// recipes.ts 列表页跳转逻辑
goToUpdatePage(recipe: any) {
  // 深拷贝：先转成JSON字符串，再解析回对象
  const recipeCopy = JSON.parse(JSON.stringify(recipe));
  this.navCtrl.push('RecipePage', { recipe: recipeCopy });
}

⚠️ 注意：这种方法不能处理Date对象、函数、undefined等特殊类型，如果你的recipe包含这些，建议自己实现递归深拷贝函数，或者引入第三方库（比如lodash的cloneDeep）。

最后：更新时同步原数据 #

当用户在更新页点击更新按钮后，再把修改后的副本同步回原列表或数据源：

// recipe.ts 更新页组件的更新逻辑
updateRecipe() {
  // 获取更新页里修改后的拷贝对象
  const updatedRecipe = this.navParams.get('recipe');
  
  // 找到原列表中对应的recipe（假设用id匹配）
  const targetIndex = this.recipes.findIndex(recipe => recipe.id === updatedRecipe.id);
  if (targetIndex !== -1) {
    // 更新原列表中的对象（可以用Object.assign合并属性，或者直接替换）
    this.recipes[targetIndex] = Object.assign({}, updatedRecipe);
    // 保存到数据源（比如API、本地存储）
    this.saveRecipesToStorage();
  }
  
  // 返回列表页
  this.navCtrl.pop();
}

这样处理后，用户在更新页的临时修改只会作用于副本，只有点击更新按钮后，原数据才会被修改，完美解决你的问题！

内容的提问来源于stack exchange，提问作者Karim Garali