使用@Input 进行双向绑定答案

【问题标题】：Two-way binding with @Input使用@Input 进行双向绑定
【发布时间】：2015-12-28 18:13:18
【问题描述】：

我正在尝试在 Angular 2.0 中构建一个非常简单的组件，一个名为 <my-select> 的自定义下拉菜单。

我将model 传递给<my-select>，我希望在最终用户从下拉列表中选择一个选项时更新它。

Plunker：http://plnkr.co/edit/iY1hG0q9rsgrR6ltKXW4?p=preview

正如我们从 Plunker 中看到的，只有 <my-select> 本地的 model 对象正在更新，而不是我从 <app> 传入的 model 对象。我在这里想念什么？一种双向绑定如何绑定到自定义组件？

在 Angular 1.x 中，这就像使用 = 将变量传递到 directive 的 $scope 一样简单。

【问题讨论】：

标签： angular

【解决方案1】：

在你的MySelect 中你需要一个输出

@Output() modelChange:EventEmitter = new EventEmitter();

然后您通过modelChange.next(newValue) 通知父母更改的值；

另见Angular2: Passing values up from a component

【讨论】：

这行得通。冗长且不直观，但它有效。你有任何关于它为什么被设计成这样的背景吗？ Angular 1.x 更优雅地处理了这个问题，并且代码减少了 90%。
这是 React 风格，使双向绑定更容易实现并且性能更高。从父到子的数据绑定传播值更改，向上由事件完成。这篇文章应该提供一些见解victorsavkin.com/post/110170125256/…
与新的 Angular 方式相关的另一个重点是可工具性。 IDE 应该能够更好地理解组件和指令的公共 API，以便能够提供更好的支持。
这里是一个带有更新解决方案的 plunkr：plnkr.co/edit/nx07vJtYGRk3eEfoXQKD?p=preview
另外我想说它更容易理解组件在做什么。您会立即看到正在发生的事情和正在发生的事情。在 Angular 1 中，您始终必须扫描整个指令并查看作用域上的 = 绑定是否已更改。

【解决方案2】：

如果您对输入属性使用对象而不是整数/基元，则父级将看到更改，因为父级和子级都具有相同的对象引用。（我想它有点类似于 Angular 1 = 绑定。）使用这种方法，您不需要使用事件：

export class App {
    model = {value: 1};

export class MySelect {
  selectOption(event) {
    this.model.value = event;
  }

Plunker

我不确定这是否是推荐的方法（即，事件可能是向父母传递信息的唯一推荐方法），但 Structural Directives 指南中的 heavy-loader 示例使用了我上面介绍的技术。主/父组件有一个logs 数组属性，它作为输入属性绑定到子组件。子组件只需 push() 到该数组上，父组件显示该数组。

【讨论】：