Angular2 父子组件数据通信实例

如今的前端开发，都朝组件式开发模式靠拢，如果使用目前最流行的前端框架Angular和React开发应用，不可避免地需要开发组件，也就意味着我们需要考虑组件间的数据传递等问题，不过Angular 2已经为我们提供了很好的解决方案。

父组件和子组件

接触过面向对象编程的开发者肯定不会对父子关系陌生，在Angular 2中子组件存在于父组件“体内”，并且父子组件可以通过一些渠道进行通讯。

父组件向子组件传入数据 – @Input

当我们着手开始开发一个组件时，第一件想到的应该就是为其传入数据，毕竟我们期望组件为我们处理某些工作通常就需要给其提供“养料”，毕竟不能又让马儿跑，又不给马儿吃草。Angular 2中子组件使用装饰器@Input接收父组件传入的数据：

// child-component.tsimport { OnInit, Component, Input } from '@angular/core';@Component({  selector: 'child-component',  ...})export class ChildComponent implements OnInit {  @Input  count: number = 0;  ngOnInit() {    console.log(this.count);  // 父组件内传入的值或者我们自己设置的初始值0  }  increaseNumber() {    this.count ++;  }  descreaseNumber() {    this.count --;  }}

可以看到，我们使用装饰器@Input修饰了count属性，这就意味着child-component被使用时期望收到一个名为count的属性，当然不属于自己掌控的范围内要小心行事，别人使用我们的组件时什么情况都可能出现，所以我们为count设置了一个初始值，当父组件没有给我们的count属性传值时，我们就取此初始值。

// father-component.tsimport { Component } from '@angular/core';import { ChildComponent } from '../child-component/child-component';@Component({  template: `    <child-component [count]='initialCount'></child-component>  `,  ...})export class FatherComponent {  initialCount: number = 5;}

父组件使用child-component时，为count属性赋予初始值initialCount，即5，也就是说此时ChildComponent的ngOnInit方法中会打印出5。注意[count]语法标识了数据流向：父组件流入子组件，即单向数据绑定。此时如果传入的数据是基本数据类型，子组件中对数组做任何操作都不会影响到父组件，但如果传入的不是基本数据类型，而是引用数据类型，则要格外注意子组件中对数据的操作可能会对父组件产生影响。

子组件通知父组件数据已处理完成 – @Output、EventEmitter

父组件传入数据给子组件之后并不是万事大吉了，就像父母养育孩子，供其读书，但孩子需要把学习进度、考试成绩等呈现给父母看（不管是否自愿…），父组件也需要子组件在合适的时机通知自己数据已经处理好，可以检阅了。而此时就需要使用@Output和EventEmitter了。