angular2父子组件传值

1: 父组件想子组件传值——@Input

       ng2的父组件向子组件传值主要用的是@Input声明其输入属性;首先在父组件用import导入数据,这里为了方便直接在父组件里面写了,最好是从外部导入,这样代码感觉整洁一些;

 angular2父子组件传值

第二步: <ctaf-cp-slider [info]="data" ></ctaf-cp-slider>  在父组件的templateUrl模板里给子组件的选择器加上要传入的值,这里的data就是刚才在ts导入的数据;

第三步:在子组件的ts里导入input;

第四步:在子组件类里声明输入属性————@Input() info: Array<Object>

第五步:在子组件模板里使用从父组件引入的值,

angular2父子组件传值angular2父子组件传值

 

 

2: 子组件向父组件传值

     ng2组件可以使用EventEmitter对象分发自定义事件。首先在子组件导入Output;

第二步:在子组件类里定义一个EventEmitter对象,它能够向父组件触发事件;

angular2父子组件传值

第三步: 在模板中写一个方法,

angular2父子组件传值

第四步: 在上一步的方法里用emit()方法发射事件

angular2父子组件传值

第五步: 在父组件模板里子组件选择器上接收子组件传过来的值

angular2父子组件传值

第六步:在父组件里处理传过来的值

angular2父子组件传值