Angular的@Output与@Input理解

@Output与@Input理解

Output和Input是两个装饰器，是Angular2专门用来实现跨组件通讯，双向绑定等操作所用的。

@Input

Component本身是一种支持 nest 的结构，Child和Parent之间，如果Parent需要把数据传输给child并在child自己的页面中显示，则需要在Child的对应 directive 标示为 input。

形如：

@Input() name: number;

我们通过一个例子来分析一下@Input的流程。

流程：

1. child_component.ts内有students，并且是被Input标记的，那么这个属性作为输入属性
2. 在parent_component.html内直接使用了students，那是因为在parent.module.ts内将child组件import进来了
3. [students]这种形式叫属性绑定，绑定的值为school.schoolStudents属性
4. Angular会把schoolStudents的值赋值给students，然后影响到子组件的显示

所以我们可以总结，child_component中有数据要显示，但是这个数据的来源是通过parent_component.html中通过属性绑定的形式作为child组件