Event Emitter در انگولار

اگر نیاز دارید از کامپوننت جاری به parent دیتا ارسال بشه میتونید از Event Emitter همراه با دکوراتور Output استفاده کنید

در واقع Event Emitter به شما امکان ساخت Event سفارشی را میده

و دکوراتور Output اجازه میده بتونید ٍEvent خودتونو به کامپوننت Parent ارسال کنید

در مثال زیر کامپوننتی به نام child داریم :

import { Component, OnInit,Output,EventEmitter } from '@angular/core';

@Component({

selector: 'app-child',

templateUrl: './child.component.html',

styleUrls: ['./child.component.css']

})

export class ChildComponent implements OnInit {

   @Output()

   message: EventEmitter<any> =  new EventEmitter<any>();

   constructor() { }

   ngOnInit(): void {

 }

    sendMessage(){

   this.message.emit(&quotmessage from child component&quot)

  }

}

در اینجا پروپرتی message با دکوراتور output مزین شده و با این کار در کامپوننت Parent بهش دسترسی داریم

تایپ دیتای EventEmitter بصورت جنریک مشخص میشه که در اینجا any انتخاب شده ولی بسته به نوع دیتای که میخوایم ارسال کنیم میتونستیم string هم بزاریم

در تابع sendMessage پیامی را emit کردیم که در کامپوننت parent میخوایم دریافتش کنیم

پس تا اینجا یک پروپرتی به نام Message داریم که یک Event سفارشی هست و چون روی اون دکوراتور Output گذاشتیم در Parent بهش دسترسی داریم

در View کامپوننت parent هم داریم :

<app-child (message)=&quotgetMessage($event)&quot>

</app-child>

<h1>{{receivedMessage}}</h1>  

در اینجا هم از event ایی که در مرحله ی قبل ساختیم به این شکل استفاده میکنیم و دیتایی که دریافت شده را به تابع getMessage پاس میدیم

و در کامپوننت parent به این شکل داریم :

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

receivedMessage:string;

getMessage(msg){

this.receivedMessage= msg;

}

}

امیدوارم براتون مفید بوده باشه