angular组件交互

这周在写项目的原型，没遇到什么太大的问题，抽空把angular组件交互看了一下，记录一下。

组件之间的交互主要是在主从组件之间进行交互.在一个组件的模板里使用了另外一个组件，这两个组件之间就是主从组件的关系。一个为宿主(父组件)组件,一个为子组件.

在FatherComponent组件中使用的child组件,此时father就是child的父组件.

从父组件到子组件

@Input()装饰器

就像angular其余指令的数据绑定同样，能够在子组件设置从外获取数据,用@Input()装饰器，就能够把类中的数据绑定到指令的属性上。

调用的时候:

setter截取

将@Input装饰器放在setter方法上能够对获取的数据进行处理:

这里父亲的年龄是22岁，假定儿子小10岁，在把年龄传过去时将儿子年龄减少十岁.

将@Input装饰器绑定到set方法以后就能够根据本身的需求过滤数据了

从子组件到父组件

子组件绑定父组件数据是单向的，所以子组件数据改变并不会反应到父组件中，要想从子组件的数据传递到父组件，能够让子组件暴露事件，父组件监听事件，从而在须要时从子组件获取数据。
首先在子组件中定义一个事件发射器，用来发送咱们的事件，这个事件发射器实际上是一个可观察对象，咱们在子组件中经过@Output()装饰器把这个事件发射器暴露出去后，父组件经过注册这个属性来订阅这个可观察对象。

父组件用一个事件处理方法来绑定这个属性:

在这里当事件触发时，父组件将更新本身的年龄.
接下来就是定义什么时候触发事件了，经过.emit()触发事件发射器,在这里点击加一岁按钮就会增长子组件的年龄，而且发送事件更新父组件年龄

经过.emit(this._age)成功把子组件的年龄传给父组件，这是经过事件完成的，当点击增长按钮时，父组件也会更新年龄.
这也实现了组件之间的双向绑定.

点击加一岁:

更多组件交互方法官方文档:angualr组件交互