Angular4关于组件与组件之间的通信

最近的项目遇到一个问题就是我在A组件如何实时地获取到B组件中的变量，注意不是简单的获取B组件中的变量，而是当B组件变量发生变化时A组件中的变量也跟着变化，这就涉及到了组件与组件之间的通信问题。先说说我这次项目遇到的问题。

问题：

此次项目中使用到了barcode扫描器，我是将扫描器独立成一个组件，我需要将扫描器扫描到的barcode用一个变量存起来然后传到另一个组件去，再进行一系列的逻辑判断。这就遇到一个问题，我如何把已经存了barcode的变量传过去而不是将一个空变量传过去？

解决方法：

使用@Output、EventEmitter的方式来达到目的。下面是具体操作：
1.首先在子组件中导入Output和EventEmitter

import { Component,Output, EventEmitter,} from '@angular/core';

2.使用装饰器@Output修饰了change属性，并为其赋了初值为EventEmitter的实例；

export class MediaStreamComponent implements OnInit {
   @Output() change = new EventEmitter();
}

3.在子组件中得到了一个拥有barcode的变量后，调用了change属性的emit方法通知父组件

this.change.emit(this.变量);

4.子组件已经将自己的变量发射出来了，那么父组件就需要接收这个变量，首先需要将子组件导入进来：

import { ChildComponent } from '../child-component/child-component';

接着当子组件通知父组件时，父组件可以获取到通知中携带的数据并进行下一步操作

Value($event){
    this.code = $event; 
  }

5.到了这一步事情并不能如我们所愿，子组件虽然发射出来了，但父组件并不能接受到，我们还差最后一步操作，就是在父组件的html文件中加入如下代码：

<child-component (change)="Value($event)"></child-component>

这一步就是将父组件与子组件绑在了一起，子组件的某一个变量一旦发生变化，父组件就会立马得到消息并更新。

• 注 ：虽然父子间的通信时完成了，但在父组件html页面中嵌入以上代码会出现页面混乱的问题，即使你使用[hidden]=“true”也解决不了问题。