角属性绑定目标可以改变构件属性

Question

我对角4很陌生，在阅读官方教程https://angular.io/tutorial时，我遇到了主/详细组件(https://angular.io/tutorial/toh-pt3)，它们在英雄列表组件和英雄详细信息组件之间做了一个属性绑定：

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

以下是本教程的直接引用：

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

如果您检查代码，app英雄细节允许通过输入字段更改hero.name参数。令我惊讶的是，当更改hero.name字段时，selectedHero.name值也会发生变化(您可以检查活动恶魔https://stackblitz.com/angular/moymegapmypx)。

我遗漏了什么吗？这难道不是单向绑定(selectedHero改变英雄，而不是另一种方式)吗？我相信这是有原因的。

Answer 1

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

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

Answer 2

hero-details组件从父对象接收selectedHero对象(准确地说，是对该对象的引用)作为输入。然后可以通过输入字段修改相同的对象，但是由于我们仍然引用父对象传递的相同对象，所以更改也会在其中反映出来。