angular组件交互

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

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

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

从父组件到子组件

@Input()装饰器

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

调用的时候:

setter截取

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

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

将@Input装饰器绑定到set方法之后就可以根据自己的需求过滤数据了

从子组件到父组件

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

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

在这里当事件触发时，父组件将更新自己的年龄.
接下来就是定义何时触发事件了，通过.emit()触发事件发射器,在这里点击加一岁按钮就会增加子组件的年龄，并且发送事件更新父组件年龄

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

点击加一岁:

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