Angular中的组件交互

官方文档其实对此已经有了比较好的说明，但是理解起来还是有一定难度。其实Angular体系的组件交互总结起来就是两点：

1.父组件向子组件传值，通过属性绑定，即中括号[ ]

2.子组件向父组件传值，通过事件触发，即小括号( )

父组件向子组件传值

首先，子组件中要用@Input()装饰器来表示输入的变量，将父组件传入的内容用一个变量承载。
例如，子组件（假设名称为”app-child”）中：

@Input() incomingData: any;

然后在父组件中使用

//注意这里绑定的属性名称，就是子组件中变量的名称//后面的data则是父组件中的data变量<app-child [incomingData]="data"></app-child>

这样，子组件就可以获取到父组件传入的值，并进行操作。

子组件向父组件传值

子组件向父组件传值要通过事件来传递。
首先在子组件中要定义EventEmitter，来创建自定义事件。

@Output() outputEvent = new EventEmitter<any>();

这时，子组件app-child就有了一个自定义的事件outputEvent，并且可以由开发者决定在子组件中何时触发，触发方式为调用emit()事件。

//在子组件中发射事件，而数据value则会包装在$event中outputEvent.emit(value);

同时，对于父组件而言，需要对子组件的事件设置事件监听器，从而捕捉子组件的事件，同时也就能获取到传过来的数据。

//父组件中捕捉事件，这里对应的回调函数为resolveFn(event)<app-child (outputEvent)="resolveFn($event)"></app-child>

然后，在resolveFn(event)中传入的$event也就是子组件传入的值，这样也就完成了子组件向父组件的传值。