为了让大家学习起来轻松、易懂，小编尽量做到篇幅短，语言通俗易懂，知识点分段来讲，以免太长了看起来很累，也很容易失去耐心阅读下去，希望大家理解和支持，同时希望大家点赞和分享出去，让更多的志同道合的朋友来学习
子组件向父组件传递数据
使用事件传递是子组件向父组件传递数据最常用的方式，子组件需要实例化EventEmitter类来订阅和触发自定义事件
第一步定义子组件
childenComponent.ts（子组件）
import {Component, Output, EventEmitter} from '@angular/core';
@Component({
selector: 'app-childen',
templateUrl: './childen.component.html',
styleUrls: ['./childen.component.css']
})
export class ChildenComponent
{
@Output() event = new EventEmitter();
private name: string;
upward() {
this.event.emit(this.name);
}
}
(1).实例化EventEmitter，赋值给event，event被@Output装饰器定义为输出属性，这样event具备了向上级传递数据的能力，通过调用EventEmitter类中定义的emit方法，来向上传递数据
(2).定义一个name属性，用于接受子组件页面的输入
(3).定义upward方法，用于子组件页面点击事件 触发事件调用，upward()方法里面调用自定义事件event来触发emit方法 传递数据
childenComponent.html（子组件模版）
<div class="childen-box">
<p>子组件</p>
<div>
<label>姓名：</label><input type="text" [(ngModel)]="name">
<input type="button" (click)="upward()" value="传递数据给父组件">
</div>
</div>
第二步定义父组件
parentComponent.ts（父组件）
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
private parent_name: string;
getData(event) {
this.parent_name = event;
}
}
parentComponent.html（父组件模版）
<div class="parent_div">
<p>父组件</p>
<div>
接收子组件数据：{{parent_name}}
</div>
<!---子组件指令 start-->
<app-childen (event)="getData($event)"></app-childen>
<!---子组件指令 end-->
</div>
父组件通过绑定自定义事件event ,来订阅来自子组件触发事件（这里是点击事件），当我们点击子组件上面的按钮，调用子组件的upward()方法,内部实现会调用this.event.emit(this.name);传递数据，自此父组件就能够监听自定义事件event。调用getData来接收传递过来的数据
最终效果:表单输入数据，点击页面按钮，数据传递到父组件，在显示出来
<完>
个人学习心得，大神路过，不喜勿喷