Angular2父子组件之间数据传递：@Input和@Output (下)

​为了让大家学习起来轻松、易懂，小编尽量做到篇幅短，语言通俗易懂，知识点分段来讲，以免太长了看起来很累，也很容易失去耐心阅读下去，希望大家理解和支持，同时希望大家点赞和分享出去，让更多的志同道合的朋友来学习

子组件向父组件传递数据
使用事件传递是子组件向父组件传递数据最常用的方式，子组件需要实例化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来接收传递过来的数据

 

最终效果:表单输入数据，点击页面按钮，数据传递到父组件，在显示出来

 

个人学习心得，大神路过 ，不喜勿喷
有问题加我微信提问或者留言