如何在Angular2+组件中按值传递对象？

这个问题在Angular开发里太常见了——因为JavaScript里对象和数组都是引用类型，哪怕你用的是单向@Input绑定，子组件修改对象属性时，父组件的原始对象也会跟着变。本质上你传递的不是对象本身，而是指向它的内存引用。下面给你几种靠谱的解决办法，还有行业里的最佳实践：

方法1：在父组件传递前做深拷贝 #

你可以在父组件里先把parentFoo深拷贝一份，再传给子组件。这样子组件拿到的是一个全新的对象，和父组件的原始对象没有引用关联。

简单实现（适合结构简单的对象） #

用JSON.parse(JSON.stringify())是最快捷的深拷贝方式，但要注意它的局限性：不能处理Date、函数、undefined、Symbol这类特殊类型。

父组件类：

import { Component } from '@angular/core';
import { Foo } from './foo.model';

@Component({
  selector: 'app-parent',
  template: `
    <div id="parent">
      <app-child-component [foo]="getCopiedFoo()"></app-child-component>
    </div>
  `
})
export class ParentComponent {
  parentFoo: Foo = { id: 1, name: 'Original Foo' };

  getCopiedFoo(): Foo {
    return JSON.parse(JSON.stringify(this.parentFoo));
  }
}

复杂对象的处理 #

如果你的Foo包含特殊类型，比如Date，可以用第三方库（比如Lodash的cloneDeep），或者自己实现递归深拷贝：

deepCopy<T>(obj: T): T {
  if (obj === null || typeof obj !== 'object') return obj;
  if (obj instanceof Date) return new Date(obj.getTime()) as unknown as T;
  if (obj instanceof Array) return obj.map(item => this.deepCopy(item)) as unknown as T;
  if (typeof obj === 'object') {
    const copiedObj = {} as T;
    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        copiedObj[key] = this.deepCopy(obj[key]);
      }
    }
    return copiedObj;
  }
  return obj;
}

方法2：在子组件内部接收时做拷贝 #

如果不想改动父组件，也可以在子组件里通过setter方式的@Input，把传入的对象立刻拷贝一份，后续操作都基于这个拷贝后的对象。

子组件类：

import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
import { Foo } from './foo.model';

export class ChildComponent implements OnInit {
  private _foo: Foo;

  // 用setter接收输入并拷贝
  @Input() set foo(value: Foo) {
    this._foo = JSON.parse(JSON.stringify(value));
  }

  // 对外暴露拷贝后的对象（可选）
  get foo(): Foo {
    return this._foo;
  }

  @Output() onChange: EventEmitter<Foo> = new EventEmitter<Foo>();

  constructor() { }

  ngOnInit() { }

  // 子组件修改时，操作拷贝后的对象，再通过事件通知父组件
  updateFoo() {
    this._foo.name = 'Modified Foo';
    this.onChange.emit(this._foo);
  }
}

这样子组件里的任何修改都不会影响父组件的原始对象，父组件可以通过onChange事件接收修改后的对象，再决定是否更新自己的parentFoo：

父组件模板修改：

<div id="parent">
  <app-child-component [foo]="parentFoo" (onChange)="updateParentFoo($event)"></app-child-component>
</div>

父组件类添加方法：

updateParentFoo(updatedFoo: Foo) {
  // 父组件主动更新原始对象
  this.parentFoo = updatedFoo;
}

方法3：使用不可变对象模式 #

这是Angular（以及React等现代框架）的最佳实践之一——永远不修改原始对象，而是创建新对象来表示变更。这样从根源上避免了引用共享带来的副作用，还能让Angular的变更检测更高效。

比如在子组件里修改对象时，用扩展运算符（...）创建新对象：

updateFoo() {
  // 创建新对象，保留原始对象的所有属性，只修改需要变更的部分
  const updatedFoo = { ...this.foo, name: 'New Immutable Foo' };
  // 如果有嵌套对象，需要递归扩展
  // const updatedFoo = { ...this.foo, nested: { ...this.foo.nested, prop: 'New Value' } };
  this.onChange.emit(updatedFoo);
}

你也可以用专门的不可变数据库（比如Immer）来简化嵌套对象的修改，让代码更简洁：

import { produce } from 'immer';

updateFoo() {
  const updatedFoo = produce(this.foo, draft => {
    draft.name = 'New Immutable Foo';
    draft.nested.prop = 'Updated Nested Prop';
  });
  this.onChange.emit(updatedFoo);
}

最佳实践总结 #

1. 遵循单向数据流原则：子组件只负责展示和收集用户输入，不直接修改@Input传入的对象，而是通过@Output事件把修改后的结果通知父组件，由父组件来更新状态。
2. 优先使用不可变对象：这能大幅减少意外的副作用，让状态变更更可预测，还能优化Angular的变更检测性能。
3. 谨慎选择拷贝方式：简单对象用JSON.parse(JSON.stringify())足够；复杂对象用LodashcloneDeep或自定义递归拷贝；避免在模板里频繁调用拷贝方法（可以在父组件里缓存拷贝后的对象，比如在ngOnInit或ngOnChanges中处理）。
4. 保持子组件的纯洁性：子组件尽量设计成无状态或纯组件，只依赖输入和输出，这样组件更易于测试和复用。

内容的提问来源于stack exchange，提问作者Johannes Stricker