码迷,mamicode.com
首页 > 其他好文 > 详细

angular2 学习笔记 ( Component 组件)

时间:2016-08-28 23:48:00      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:

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. 

 

angular2 学习笔记 ( Component 组件)

标签:

原文地址:http://www.cnblogs.com/keatkeat/p/5816368.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!