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

1. 子组件引入 Output 和 EventEmitter

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

 

2.子组件中实例化 EventEmitter

@Output() private outer=new EventEmitter<string>();

3. 子组件通过 EventEmitter 对象 outer 实例广播数据

 

sendParent(){
  // alert('zhixing');
  this.outer.emit('msg from child')
}

 

4.父组件调用子组件的时候，定义接收事件 , outer 就是子组件的 EventEmitter 对象 outer

 <app-header (outer)="runParent($event)"></app-header>

5.父组件接收到数据会调用自己的 runParent 方法，这个时候就能拿到子组件的数据

//接收子组件传递过来的数据 
runParent(msg:string){
   alert(msg);
 }

<p>
 header commponets
 <button (click)="sendParent()">发送数据</button>
</p>