首页 > 代码库 > angular2 学习笔记 ( Component 组件)
angular2 学习笔记 ( Component 组件)
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 = "http://www.mamicode.com/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 = http://www.mamicode.com/$event" ></my-product>
当我们绑定到原生游览器组件是有些概念要清楚.
1. dom Attribute 和 dom Property 不是同一个东西
<img src="http://www.mamicode.com/123.jpg" /> 写在 element 上的是 Attribute, 它的值只用来初始化 property 的值
imgDomObject.src = "http://www.mamicode.com/456.jpg" 这个才是 property.
ng 的绑定是在 property 上的.
Attribute 和 Property 不总是一对一匹配的, 有些 Attribute 是没有 property 的，这时我们要这样写
<some-elem [attr.attributeName]="..." > 要在前面加 attr.
angular2 学习笔记 ( Component 组件)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。