Angular 属性绑定目标可以改变组件属性答案

【问题标题】：Angular property binding target can change component propertyAngular 属性绑定目标可以改变组件属性
【发布时间】：2018-10-27 09:45:23
【问题描述】：

我是 Angular 4 的新手，在阅读官方教程 https://angular.io/tutorial 时，我偶然发现了 Master/Detail 组件 (https://angular.io/tutorial/toh-pt3)，他们在英雄列表组件和英雄详细信息组件之间进行了属性绑定：

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

这是教程的直接引用：

这是从 HeroesComponent 的 selectedHero 属性到目标元素的 hero 属性的单向数据绑定，它映射到 HeroDetailComponent 的 hero 属性。现在，当用户单击列表中的英雄时， selectedHero 会发生变化。当 selectedHero 发生变化时，属性绑定会更新 hero 并且 HeroDetailComponent 会显示新的 hero。

如果您检查代码，app-hero-detail 允许通过输入字段更改 hero.name 参数。令我惊讶的是，在更改 hero.name 字段时， selectedHero.name 的值也发生了变化（您可以查看直播恶魔https://stackblitz.com/angular/moymegapmypx）。

我有什么遗漏吗？这不应该是一种单向绑定（selectedHero 改变英雄但不是另一种方式）？我相信对此有一个解释。

【问题讨论】：

标签： angular property-binding

【解决方案1】：

那是因为您将 hero 实例的引用传递给孩子，实际上两者都是同一个对象。如果你尝试通过创建一个新英雄来改变 hero 的值，你可以看到它是单向的。

export class HeroDetailComponent implements OnInit {
  _hero: Hero;

  @Input('hero')
  set hero(value: Hero) {
    this._hero = Object.assign(new Hero(), value);
  }
  get hero(): Hero {
    return this._hero;
  }

  constructor() { }

  ngOnInit() {
  }

}

https://stackblitz.com/edit/angular-yvzbug?file=src/app/hero-detail/hero-detail.component.ts

【讨论】：

【解决方案2】：

hero-details 组件从父组件接收selectedHero 对象（准确地说，是对该对象的引用）作为输入。然后可以通过输入字段修改同一个对象，但由于我们仍然引用从父项传递的同一个对象，因此更改也会反映在那里。

【讨论】：