新的Angular采用Web Component的方式进行组件的封装，并将组件间的组织关系设计称为树状结构。这为应用数据的流向，管理提供了良好的支持， 也使得我们可以在Angular应用中使用一些别的库，比如： Redux 思想。基于这些设计理念，Angular为指令提供了更为强大的功能，组件也是指令。
采用 @Input 修饰属性，实现 parent -> child 组件间的通信
下面的示例代码将展示如何设置一个组件的Input属性
import { Component, Input, OnInit } from '@angular/core'; @Component({ moduleId: module.id, selector: 'child-component', template: `I'm {{ name }}` }) export class ChildComponent implements OnInit { @Input() name: string; constructor() { } ngOnInit() { } }
上面的代码中，我们实现了一个名叫ChildComponent的组件，这个组件的有一个采用@Input装饰器修饰的属性：name。
下面我们将展示如何使用这个这个组件，并为这个Input属性赋值。
import { Component, OnInit } from '@angular/core'; import { ChildComponent } from './child-component'; @Component({ moduleId: module.id, selector: 'parent-component', template: `<child-component [name]="childName"></child-component>`, // This is unnecessary when installing ChildComponent within Root NgModule directives: [ChildComponent] }) export class ParentComponent implements OnInit { private childName: string; constructor() { } ngOnInit() { this.childName = 'StevenShen'; } }
上面的代码实现中，在父组件中，我们为子组件的Input属性设置了父组件中的特定值。关键点在如下片段：
<child-component [name]="childName"></child-component>
Angular在进行AOT操作时，会将特定的值注入给ChildComponent中。
如果你在CodePen，或是自己的本地实验上面的代码你会发现，和AngularJS的指令中采用'@', ‘=', ‘&'等修饰的属性不一样的地方。
当父组件中的childName发生变化时，ChildComponent中的name属性并没有感知到变化。这是怎么了，是不是感觉新版的Angular在 和我们开玩笑，wtf！！！内心的表情是这样的 ○|￣|＿ 。（感觉一篇学习笔记开始被写的画风突变了。。。）
将父组件的属性变化映射到子组件中
上一小节的实现，虽然在初始化子组件时，我们可以将父组件的值反馈到子组件中。但是，初始化完成后，父组件中相关属性的变化却不能被子组件感知。
这无疑是让我们内心崩溃的。为什么和AngularJS不一样了？？？别急，下面我们将来提供解决方案。
利用Angular提供的组件生命周期钩子函数ngOnChanges来监听输入属性值的变化
需要实现让子组件感知到父组件中相关属性的变化，我们需要对Angualr组件的生命周期有一定的了解，采用Angular提供的组件生命周期的钩子函数， 进行组件间数据的同步。（关于Angualr组件的生命周期，之后会有相关的学习笔记整理。到时候在加上链接。）这里直接上代码：
import { Component, Input, SimpleChanges } from '@angular/core'; @Component({ moduleId: module.id, selector: 'child-component', template: `I'm {{ name }}` }) export class ChildComponent { @Input() name: string; ngOnChanges(changes: SimpleChanges) { this.name = changes['childName'].currentValue; } }
采用ES5中的getter和setter方法进行输入属性的监听
在ES5中，我们在定义一个对象的属性时，可以通过Object.defineProperty方法为一个对象的属性设置关联的getter和setter方法， 当我们进行这一操作后，以后该对象上的相关属性的读取和赋值操作，都会调用相应的getter／setter方法进行预处理或改变操作结果。
同样的道理，在Angular中，我们通过设置和使用一个输入属性的setter方法，便可以拦截到父组件中相关值的变化，并进行特定的数据处理。
这种方法比较直观，直接上代码：
父组件的代码实现：
import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'name-parent', template: ` <h2>Master controls {{names.length}} names</h2> <name-child *ngFor="let name of names" [name]="name"></name-child> ` }) export class ParentComponent { names = ['StevenShen', ' ', ' lei ']; }
子组件的代码实现
import { Component, Input } from '@angular/core'; @Component({ moduleId: module.id, selector: 'name-child', template: `<h3>"{{name}}"</h3>` }) export class ChildComponent { name: string = 'default name'; @Input() set name(name: string) { this.name = (name && name.trim()) || 'default name'; } get name() { return this.name; } }
采用 @Output 修饰属性，实现 child -> parent 组件间的通信