angular使用@output子组件获取父组件的数据和方法

1、子组件引入 Output  和 EventEmitter

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

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

2. 子组件中实例化 EventEmitter对象 ：outer

@Output() private outer=new EventEmitter<string>();
/*用 EventEmitter 和 output 装饰器配合使用 <string>指定类型变量*/

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

 

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

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

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

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