@Input双向绑定

我正在尝试在Angular 2.0中构建一个非常简单的组件，称为<my-select>的自定义下拉列表。@Input双向绑定

我将model转换为<my-select>，我期望在最终用户从下拉列表中选择一个选项时更新它。

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

我们可以从Plunker看到的，只有model对象本地<my-select>正在更新，而不是model对象，我从<app>传递英寸我在这里错过了什么？双向如何绑定到自定义组件？

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

2015-12-28 lux

在你MySelect你需要的输出

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

，然后你通知关于改变的值由modelChange.next(newValue)父母;

又见Angular2: Passing values up from a component

来源

2015-12-28 18:18:41

This Works。详尽而不直观，但它的工作原理。你有什么背景知道为什么它是这样设计的？ Angular 1.x处理得更加优雅，代码少90％。 – lux

这是React风格，使双向绑定更容易实现并且性能更高。从父母到孩子的数据绑定传播价值的变化，向上是由事件完成的。这篇文章应该提供一些见解http://victorsavkin.com/post/110170125256/change-detection-in-angular-2 –

谢谢，我只是习惯于范围：{model：'='}'做了所有举重，无输入，输出，EventEmitters等，我会读。似乎好处是性能，而不是可读性。 – lux

如果您使用的对象，而不是一个整数/原始的输入特性，父母会看到的变化，因为无论是家长和孩子有相同的对象引用。（我想这有点类似于角1 =绑定）。通过这种方法，你不需要使用事件：

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

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

Plunker

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

来源

2015-12-28 20:57:22

@Input双向绑定

回答

相关问题