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>