angular6 子组件向父组件通信in Angular 6. 子组件以 ==触发emit事件方式== 将数据传给父

子组件向父组件传值

in Angular 6. 子组件以 ==触发emit事件方式== 将数据传给父组件。

子组件中：

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

// 子组件中申请输出实例
@Output fromChild = new EventEmitter();

... ...
// 发送数据
fromChild.emit(data);

假如子组件的标签为：

父模块中：

将子组件用在父组件中，使用(fromChild)来传递emit函数

// html     fromChild 定义在子组件中
<app-child (fromChild)="fromChildFunc($event)" ></app-child>


// js       fromChildFunc 处理处理从子组件接受到的值
fromChildFunc(data) {
  console.log(data);
  ... ...
}

坑点： fromChildFunc( $event ) 参数必须为 $event

这么做的原因是避免与本组件的同名变量发生冲突
参考：组件之间的交互