使用EventEmitter在組件中傳參,這種方法比較靈活小泉,不受父子組件的限制,可以在所有組件間自由使用。具體做法如下:
- 在服務(wù)中定義一個(gè)EventEmitter
import { EventEmitter, Injectable} from '@angular/core';
@Injectable({
provideIn: 'root'
})
export class EventEmitService{
myEventEmitter: EventEmitter<number> = nuw EventEmitter();
}
- 在一個(gè)組件中發(fā)送傳參憔维,發(fā)送傳參的事件往往由點(diǎn)擊button事件觸發(fā)
//引入EventEmitService
import { EventEmitService } from '../../service/EventEmitSrvice';
//構(gòu)造器中聲明該服務(wù)
constructor(private eventEmitService: EventEmitService){ }
//在button的觸發(fā)函數(shù)里調(diào)用
onclick(id:number){
this.eventEmitService.myEventEmitter.emit(id);
}
- 在另一個(gè)組建里訂閱該傳參,接受傳參的事件只需在初始化時(shí)訂閱一下畏邢,此后就會(huì)一直監(jiān)聽(tīng)业扒,隨時(shí)觸發(fā)。
//引入EventEmitService
import { EventEmitService } from '../../service/EventEmitSrvice';
//構(gòu)造器中聲明該服務(wù)
constructor(private eventEmitService: EventEmitService){ }
//在ngOnInit()函數(shù)里訂閱
ngOnInit(): void{
this.eventEmitService.myEventEmitter.subscribe(id => {
//每當(dāng)發(fā)生一次傳參事件時(shí)舒萎,都會(huì)再次執(zhí)行下面代碼
showParam(id); //showParam(id){ console.log(id); }
}
}
EventEmitter傳參示意圖.png
總結(jié)程储,在服務(wù)中定義一個(gè)EventEmitter, 在一個(gè)組件中使用emit傳參臂寝,另一個(gè)組件中使用subscribe()接受傳參章鲤。