@Output დეკორატორი ანგულარში (Angular)

წინა გაკვეთილში ვისწავლეთ თუ როგორ გავგზავნოთ მონაცემები მშობელი კომპონენტიდან შვილ კომპონენტში, მაგრამ ასევე ხშირად არის იმის საჭიროება, რომ პირიქით, შვილი კომპონენტიდან მშობელ კომპონენტში გავგზავნოთ რაიმე ინფორმაცია, სწორედ ამისთვის არის შექმნილი @Output() დეკორატორი ანგულარში

შვილი კომპონენტის მომზადება

ინფორმაციის გასაგზავნად შვილი კომპონენტის კლასში აუცილებელია ჩავაიმპორტოთ Output დეკორატორი და კლასში ავღწეროთ ის თვისება, რომლის საშუალებითაც გვინდა გავგზავნოთ მონაცმები, გაეცანით ქვემოთ მოეცემულ მაგალითს

child.component.ts

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {

  @Output() public dataFromChild: EventEmitter<any> = new EventEmitter();
  
  constructor() { }

  ngOnInit(): void {
  }

  sendData() {
    this.dataFromChild.emit(`hello from child component`);
  }

}

child.component.html

<button (click)="sendData()">send some data</button>

როგორც ზემოთ კოდის ნიმუშებშია მოცემული ჩვენ გვაქვს @Output() დეკორატორი dataFromChild თვისების წინ და მაში ინიციალიზებულია EventEmmiter კლასი.

რაც შეეხება sendData() მეთოდს აქ უკვე ვიძახებთ .emit() მეთოდს, რომელსაც გადავცემთ სასურველ გასაგზავნ ინფორმაციას