angular2父子组件之间传值

组件结构如下：

main.html

<div class="row">
  <div class="col-sm-2 col-md-2 catalog">
    <app-catalog [input]="catalogmsg" (event)="getData($event)"></app-catalog>
  </div>
  <div class="col-sm-5 col-md-5 board">
    <app-board></app-board>
  </div>
  <div class="col-sm-5 col-md-5 preview">
    <app-preview></app-preview>
  </div>
</div>

main为父组件，内有三个子组件：app-catalog、app-board、app-preview

由于三个子组件之间存在一些值的互相调用，所以将main作为中介，创建main.service从后台取得数据，传给所需的子组件，处理后的值再传回父组件，继续与后台相连。

一、父组件-->子组件（使用@Input）

1、定义父组件

ts文件

catalogmsg是父组件传向子组件的变量

html文件

通过[input]将catalogmsg值传入子组件app-catalog

2、定义子组件

ts文件

使用@Input装饰变量input（要与父组件中[]中的变量一致），即可接收父组件中传来的值。

使用ngOnChanges()监控数据的变化，父组件中的数据发生变化的话就触发该函数，此处console出来的值就是父组件中的catalogmsg。

二、子组件-->父组件（使用@Output）

子组件需要实例化EventEmitter类来订阅和触发自定义事件

1、定义子组件

ts文件

定义code变量作为子组件向父组件传输的值。

定义event为EventEmitter的一个实例，可以通过调用emit()方法来向上传递数据。

然后在该组件的某点击事件中获取值赋给code传过去即可：

this.event.emit(this.code);

2、定义父组件

ts文件

html文件

父组件会一直监听event，有变化时会调用getData来接收，event即为传过来的值。