Angular单向属性绑定疑问：子组件修改为何同步父组件属性？

嘿，这个问题真的是Angular新手入门时的常见“误区”，我来给你梳理清楚关键所在：

首先明确：Angular的单向属性绑定到底管什么？ #

你看到的 <app-hero-detail [hero]="selectedHero"></app-hero-detail> 确实是父组件到子组件的单向赋值绑定，它的核心规则是：

• 当父组件的 selectedHero 引用发生变化时（比如你把它换成另一个Hero对象），子组件的 hero 属性会被自动更新为新的引用。
• 反过来，如果你在子组件里直接修改 hero 的引用（比如写 this.hero = new Hero();），父组件的 selectedHero 不会有任何变化——这才是“单向”的真正含义。

为什么修改子组件的hero.name会影响父组件？ #

问题出在JavaScript引用类型的特性上：
selectedHero 是一个对象，属于引用类型。当Angular把它赋值给子组件的 hero 属性时，传递的不是对象的副本，而是同一个对象的引用地址。也就是说，父子组件现在共享同一个Hero对象实例。

打个简单的JavaScript原生例子就能明白：

let parentHero = { name: 'Thor' };
let childHero = parentHero; // 传递引用，不是复制对象
childHero.name = 'Loki';
console.log(parentHero.name); // 输出 "Loki"

你修改的是对象内部的属性值，而不是改变引用本身，所以两边都会同步看到变化——这和Angular的绑定方向无关，是JS本身的特性。

如何避免子组件修改影响父组件？ #

如果你想让子组件的修改不波及父组件，可以在子组件接收hero时，创建一个对象的深/浅副本：

// 在HeroDetailComponent中
import { Input, OnInit } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {
  private _hero: Hero;

  @Input() set hero(hero: Hero) {
    // 创建对象浅副本，如果Hero有嵌套对象，需要用深拷贝
    this._hero = { ...hero };
  }

  get hero(): Hero {
    return this._hero;
  }

  constructor() { }

  ngOnInit(): void {
  }
}

这样子组件里操作的就是副本的属性，父组件的selectedHero就不会被影响了。

再回头看教程的说明 #

教程里说的“单向数据绑定”，强调的是绑定的赋值方向，而不是对象本身的不可变性。它要表达的是“父组件能把数据传给子组件，但子组件不能通过绑定反向修改父组件的变量引用”，而你碰到的是对象属性的修改，属于JS引用类型的范畴，不在绑定方向的约束里。

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