ng2 的组件和游览器原生的组件是同一个概念，在方方面面都很相似.
和 ng1 一样，组件少不了数据绑定
1. model to view 绑定 (单向绑定, 意思是这个值应该是只读的, 组件内部不一样修改这个值)
template: ` <my-product [model-to-view-value]="‘Derrick‘ + ‘Yam‘" ></my-product> ` @Input("model-to-view-value") //如果属性名字不一样的话可以调整 modelToViewValue: string;
2. 事件绑定 (监听嘛)
selector: "my-app", template: ` <my-product (myClick)="doSomething($event)" ></my-product> ` doSomething(data: string) { console.log(data) } selector: "my-product", template: ` <div>this is product component</div> <div (click)="publish()" >publish</div> ` @Output() myClick: EventEmitter<string> = new EventEmitter(); publish() { this.myClick.emit("value"); }
3.双向绑定
selector: "my-app", template: ` <p> value outside : {{ someValue }}</p> <div (click)="updateValue()" >update value from outside</div> <my-product [(someValue)]="someValue" ></my-product> ` someValue: string = "value start"; updateValue() { this.someValue = "value updated from outside"; }
selector: "my-product", template: ` <div> value inside : {{ someValue }}</div> <div (click)="updateValue()" >update value from inside</div> ` @Input() someValue: string; @Output() someValueChange: EventEmitter<string> = new EventEmitter(); updateValue() { this.someValueChange.emit("value updated from inside"); }
其实ng是通过数据绑定加上事件绑定来完成这事儿的, [(value)] 只是语法糖
把它拆开是这样的
<my-product [someValue]="someValue" (someValueChange)="someValue = $event" ></my-product>
当我们绑定到原生游览器组件是有些概念要清楚.
1. dom Attribute 和 dom Property 不是同一个东西
<img src="123.jpg" /> 写在 element 上的是 Attribute, 它的值只用来初始化 property 的值
imgDomObject.src = "456.jpg" 这个才是 property.
ng 的绑定是在 property 上的.
Attribute 和 Property 不总是一对一匹配的, 有些 Attribute 是没有 property 的，这时我们要这样写
<some-elem [attr.attributeName]="..." > 要在前面加 attr.
原文：http://www.cnblogs.com/keatkeat/p/5816368.html