Angular—组件间通讯

父子组件间通讯

父子组件间通讯还是非常简单的，利用输入属性就可以完成。

1. 首先需要在子组件中声明一个输入属性

2. 在父组件中也要声明一个和子组件中类型相同的属性

3. 在父组件的 html 文件中，传递给子组件

4. 然后就可以直接在子组件中的 html 中使用了

兄弟组件间通讯—中间人模式

当不是父子组件时，就不能用上面那种方法了。如果是兄弟组件，那么就可以使用中间人模式。
中间人模式的意思就是：把父组件当作中间人，先由一个子组件将数据传给父组件，再由父组件传给另一个子组件。

1. 首先要解决的就是怎么把数据从子组件传递给父组件，我们可以用 EventEmitter 对象来发射数据，然后由父组件来监听，当监听到 EventEmitter 发射了数据对象时，就执行相应的动作（即把数据传给另一个子组件）。
 1）首先在子组件中声明输出属性

 2）利用事件绑定，当发生某个事件时（比如：点击事件），就将数据发射给父组件。

  将数据发射给父组件

  当父组件监听到发射过来的数据时，就执行相应的事件

<app-price-quote (buy)="BuyStockHandler($event)"></app-price-quote>

  BuyStockHandler(event : PriceQuote){
  	//将数据赋给父组件的属性，接收发射过来的数据
    this.priceQuote = event;
  }

2. 接下来就非常简单了，由父组件将数据传给另一个子组件，就可以借助输入属性来实现，和上面的父子组件通讯一样。

总结

其实中间人模式的难点就在于子组件怎么将数据传递给父组件，我们可以通过借助 EventEmitter 对象来实现，接下来就和父子间的通讯一样了。