2. 子组件到父组件的数据传递

子组件准备

子组件到父组件的数据传递常用到的方式是通过事件传递,这种方式是通过在子组件中注册一个用来订阅或触发的事件的EventEmitter类，并用@Output修饰器修饰，将数据保存在事件中（如示例中的onCollect事件）

//broad.component.html
<div>
 <div class="board-row">
   <square [value]="items[0]" (click) = 'getNum(items[0])'></square>
   <square [value]="items[1]" (click) = 'getNum(items[1])'></square>
   <square [value]="items[2]" (click) = 'getNum(items[2])'></square>
 </div>
 <div class="board-row">
   <square [value]="items[3]" (click) = 'getNum(items[3])'></square>
   <square [value]="items[4]" (click) = 'getNum(items[4])'></square>
   <square [value]="items[5]" (click) = 'getNum(items[5])'></square>
 </div>
 <div class="board-row">
   <square [value]="items[6]" (click) = 'getNum(items[6])'></square>
   <square [value]="items[7]" (click) = 'getNum(items[7])'></square>
   <square [value]="items[8]" (click) = 'getNum(items[8])'></square>
 </div>
</div>

//broad.component.t
import{ Component,Input,OnInit,Output,OnChanges,EventEmitter,SimpleChanges } from '@angular/core';
@Component({
 selector: 'broad',
 templateUrl: './broad.component.html',
 styleUrls: ['./broad.component.css']
})

export class BroadComponent implements OnInit, OnChanges{
 @Input() options:Array;
 @Output() onCollect = new EventEmitter<number>();
 items:any = [];
 ngOnInit() {
   this.items = this.options
 }
getNum(value){
  this.onCollect.emit(value);
}
}

父组件接收

（示例请查看上面的app.component.html和app.component.ts）

在父组件上绑定子组件定义之前注册好的事件（如示例中的onCollect事件），用来订阅子组件触发的事件，当子组件对应的事件触发时，在父组件中就能够监听到该事件，从中获得子组件传递的数据，从而完成子组件到父组件的数据传递整个子到父的数据传递过程可以形象的想象成在子组件上装备了一个喇叭，同时在父组件上装了一个耳朵，这样只要喇叭有任何数据的变化，耳朵都可以监听获取到，这种事件方式的数据传递的优点是可以实时的监听到子组件数据变化。

3. 其他数据传递方式

这里简单介绍两种其他组件间的数据传递方式

本转载自 Think体验设计公众号。

原文链接：https://mp.weixin.qq.com/s/QBYWSVi0DDKKNf1GLC5sTw

创作场景

Angular2 组件间的数据传递，这几种姿势你知道吗（二）