@Output与@Input理解
Output和Input是两个装饰器,是Angular2专门用来实现跨组件通讯,双向绑定等操作所用的。
@Input
Component本身是一种支持 nest 的结构,Child和Parent之间,如果Parent需要把数据传输给child并在child自己的页面中显示,则需要在Child的对应 directive 标示为 input。
形如:
@Input() name: number;
我们通过一个例子来分析一下@Input的流程。
流程:
- child_component.ts内有students,并且是被Input标记的,那么这个属性作为输入属性
- 在parent_component.html内直接使用了students,那是因为在parent.module.ts内将child组件import进来了
- [students]这种形式叫属性绑定,绑定的值为school.schoolStudents属性
- Angular会把schoolStudents的值赋值给students,然后影响到子组件的显示 <