angular 通过 EventEmitter 在组件中传参

使用EventEmitter在组件中传参，这种方法比较灵活，不受父子组件的限制，可以在所有组件间自由使用。具体做法如下：

1. 在服务中定义一个EventEmitter

import { EventEmitter, Injectable} from '@angular/core';

@Injectable({
  provideIn: 'root'
})
export class EventEmitService{
  myEventEmitter: EventEmitter<number> = nuw EventEmitter();
}

2. 在一个组件中发送传参，发送传参的事件往往由点击button事件触发

//引入EventEmitService
import { EventEmitService } from '../../service/EventEmitSrvice';

//构造器中声明该服务
constructor(private eventEmitService: EventEmitService){ }

//在button的触发函数里调用
onclick(id:number){
  this.eventEmitService.myEventEmitter.emit(id);
}

3. 在另一个组建里订阅该传参，接受传参的事件只需在初始化时订阅一下，此后就会一直监听，随时触发。

//引入EventEmitService
import { EventEmitService } from '../../service/EventEmitSrvice';

//构造器中声明该服务
constructor(private eventEmitService: EventEmitService){ }

//在ngOnInit()函数里订阅
ngOnInit(): void{
  this.eventEmitService.myEventEmitter.subscribe(id => {
    //每当发生一次传参事件时，都会再次执行下面代码
    showParam(id);         //showParam(id){ console.log(id); }
  }
}

EventEmitter传参示意图.png

总结，在服务中定义一个EventEmitter， 在一个组件中使用emit传参，另一个组件中使用subscribe()接受传参。