Angular组件向MatDialog传值出现意外双向联动，如何实现单向绑定

这个现象并非Angular双向绑定导致，核心原因是JavaScript的引用类型传递特性：将外层持有的已选水果集合（数组、对象这类引用类型）传入MatDialog.open的data配置时，弹窗拿到的并非独立数据副本，而是和外层数据源指向同一块内存地址的引用。弹窗内部对数组做新增、删除、修改的操作，本质是直接改动了外层持有的原始数据，才会出现两侧列表同步变化的效果。

在打开弹窗、传递数据的环节，生成一份和原始数据源完全切断引用的独立副本，让弹窗所有操作都作用在这份副本上，无法触达外层的原始数据，即可实现从外层组件到弹窗的单向数据传递。

根据水果数据的结构，选择对应的拷贝方案：

• 如果水果数据是无嵌套的简单结构（比如数组元素为字符串、无嵌套属性的平面对象），使用浅拷贝即可实现引用隔离：
• 数组展开运算符写法：

```typescript
openFruitDialog() {
  // 生成独立数组副本，与原始数据切断引用关联
  const copiedFruitList = [...this.selectedFruits];
  this.matDialog.open(FruitEditDialogComponent, {
    data: { fruitList: copiedFruitList }
  })
}
```

• 数组slice方法写法，效果与展开运算符完全一致：
  const copiedFruitList = this.selectedFruits.slice();
• 如果水果数据是带嵌套的结构（比如每个水果项包含子属性对象，如{id: 1, name: '苹果', origin: {city: '烟台'}}），需要使用深拷贝生成完全独立的副本：
• 兼容现代环境的原生structuredClone方法，可完整拷贝绝大多数常规数据结构，无需引入额外依赖：
  const copiedFruitList = structuredClone(this.selectedFruits);
• 轻量快速实现：通过序列化反序列化生成副本，适合简单嵌套结构（注意该方式无法拷贝函数、Date对象、undefined等特殊值）：
  const copiedFruitList = JSON.parse(JSON.stringify(this.selectedFruits));

• 不要直接在弹窗组件中操作传入的data就当作回传逻辑：弹窗需要维护自身持有的这份独立副本，待用户点击弹窗的“确认”操作时，通过dialogRef.close(修改后的副本)把最终结果传回外层组件。外层组件在订阅弹窗关闭的回调中，手动接收返回值、更新自身的原始数据源，整个数据流就完全变为单向可控：外层传入独立初始副本→弹窗内部所有修改仅作用于自身副本→用户主动确认后，外层才同步更新最终数据。
• 规避无效隔离操作：不要在弹窗组件中写this.localList = data.fruitList这类直接赋值的语句，这本质上还是在引用同一块内存的数据，等于没有实现副本隔离，所有拷贝操作必须在外层打开弹窗的执行时机完成。

内容的提问来源于stack exchange，提问作者Learn AspNet