使用@Input进行双向绑定

Question

我试图在Angular 2.0中构建一个非常简单的组件，这是一个名为<my-select>的自定义下拉列表。

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

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

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

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

Answer 1

在MySelect中，您需要输出

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

然后通过modelChange.next(newValue);

通知家长有关更改的值

另见Angular2: Passing values up from a component

Answer 2

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

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

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

Plunker

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