Angular 2 中的 Output和Input的使用

Angular 2通过Component来作为一个subview来分隔显示的内容，比如一个类似于outlook的页面，左边一个导航栏，右边上面一个列表栏，下面一个详细信息显示，就是3个典型的 Component 的组合。 Component之间，必然会牵涉到某个Component中的操作，导致其他Component中的显示发送改变，那么，这些跨Component的操作是如何实现的呢？

Input

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

如图中所示，Child Component有一个数据 number的显示，是通过 parent Component中的 book.bookReviews 赋值，而通过

Output

output的数据流向与input相反，那就是child反向控制了parent Component的数据显示。在Angular 2中，child component定义了一个EventEmitter来达到这个目的。

在child Component中点击 Click Me 之后，触发了 EventEmitter，而这个值的输出，则在Parent Component的

参考

本文整理了youtube上的两个视频来介绍这个问题，这两个视频介绍得非常清楚，推荐看

• Angular 2 - Inputs - Communicate from Parent to Child Component
• Angular 2 - Output and Custom Events with EventEmitter