用EventEmitter收发消息

Posted 2021-01-12 nliao

下面简单介绍其步骤。

《发消息 方》

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){
   处理
｝

 

很简单吧!