下面簡單介紹其步驟。

《發消息 方》

1.import進EventEmitter

 import { EventEmitter } from ‘@angular/core‘;

2.在Component裏定義事件接口

@Component({
    selector: ‘sample-table‘,
    styleUrls: [‘sample-table.component.css‘],
    templateUrl: ‘sample-table.component.html‘,
    outputs: [‘onChangeExpand‘]
})

3.在類裏定義事件

export class sample implements {
    onChangeExpand: EventEmitter<string>;

    constructor(public dialog: MatDialog){
        this.onChangeExpand = new EventEmitter();
     }

    // 一般處理
    onClickButton( ){
        // 送信
        this.onChangeExpand.emit(this.tempData.isExpant? "on" : "off");
    }
}
 

《收消息 方》

4.在模板裏定義事件接收

<div>
  <table style="width: 98%;">
    <tr *ngFor="let data of datas">
      <sample [data]="data" onChangeExpand)="onChangeExpand($event)"></sample>
    </tr>
  </table> 
</div>

5.處理消息

onChangeExpand(msg: string){
   處理
｝
 

很簡單吧!

用EventEmitter收發消息