angular中子组件通过@Output 触发父组件的方法

  1. 子组件引入 Output 和 EventEmitter

import { Component, OnInit ,Input,Output,EventEmitter} from ‘@angular/core’;

  1. 子组件中实例化 EventEmitter

@Output() private outer=new EventEmitter();

  1. 子组件通过 EventEmitter 对象 outer 实例广播数据
    1. sendParent(){
    2. // alert('zhixing');
    3. this.outer.emit('msg from child')
    4. }
  1. 父组件调用子组件的时候，定义接收事件 , outer 就是子组件的 EventEmitter 对象 outer
  1. 父组件接收到数据会调用自己的 runParent 方法，这个时候就能拿到子组件的数据
  1. //接收子组件传递过来的数据
  2. runParent(msg:string){
  3. alert(msg);
  4. }
  5. <p>
  6.  header commponets
  7.  <button (click)="sendParent()">发送数据</button>
  8. </p>