Question

我是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更改时，属性绑定更新英雄，HeroDetailComponent显示新英雄。

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

我有什么遗失的吗？这不应该是单向绑定（selectedHero改变英雄而不是其他方式）？我相信对此有一个解释。

Answer 1

selectedHero组件接收来自父级的{{1}}对象（确切地说，是对该一个对象的引用）。然后可以通过输入字段修改同一个对象，但由于我们仍然引用从父对象传递的同一对象，因此更改也会反映在那里。

Answer 2

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

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

Angular属性绑定目标可以更改组件属性

2 个答案: