标签：
@Component中有属性值 selector,template(templateUrl),styles(styleUrl),directives,proviers,inputs,outputs。
inputs 和outputs是用来干嘛的呢？？？
first.component.ts
import {Component} from ‘angular2/core‘
import {FistChildComponent} from ‘./firstchild.component‘
@Component({
template :`
<div class="parent">
<h3>Parent</h3>
<div>child value : {{childVal}}</div>
<div><input #parentInput type="text" (keyup)="0" /></div>
<div class="child" [postValue]="parentInput.value" (getValue)="getChange($event)" >
</div>
</div>
`,
styles : [`
.parent { padding:10rem 2rem 2rem; background-color:#ececec;}
.child { padding:2rem; background-color:#eee; border:1px solid #000; margin:2rem 0;}
`],
directives : [FistChildComponent]
})
export class FirstComponent {
public childVal: string;
getChange(val){
this.childVal = val;
}
}
firstchild.component.ts
import {Component ,EventEmitter} from ‘angular2/core‘
@Component({
selector : ‘.child‘,
template : `
<div class="childNode">
<h3>Child</h3>
<div>parent value : {{postValue}}</div>
<div><input type="text" #childInput (keyup)="onChange(childInput.value)" /></div>
</div>
`,
inputs : [‘postValue‘],
outputs : [‘getValue‘]
})
export class FistChildComponent {
getValue = new EventEmitter<string>();
onChange(val){
this.getValue.emit(val);
}
}
inputs和outputs 用来从父模块中接收数据和向父模块发送数据的，在父模块中 [postValue]对应inputs (getValue)对应outputs
要记住一点的是：父模块在引用子模块的时候是用的[], 父模块在引用子模块的时候是用的()。
inputs和outputs 可以修改为@input 和 @output
firstchild.component.ts修改为:
import {Component ,EventEmitter ,Input , Output} from ‘angular2/core‘
@Component({
selector : ‘.child‘,
template : `
<div class="childNode">
<h3>Child</h3>
<div>parent value : {{postValue}}</div>
<div><input type="text" #childInput (keyup)="onChange(childInput.value)" /></div>
</div>
`
})
export class FistChildComponent {
@Input(‘postValue‘) postValue: string;
@Output(‘getValue‘) getValue = new EventEmitter<string>();
onChange(val){
this.getValue.emit(val);
}
}
标签：
原文地址：http://www.cnblogs.com/bq-med/p/5395927.html
