Angular Component’ ler arası event yollama

Angular uygulamalarımızda iç içe yani nested component ler oluşturduğumuzda, alt component’ ten üst component’ e event yollamamız gerekebilir.

Örneğin category component’ te product-widget adında bir component ile ürünleri tek tek listeliyoruz. Ürün’ ün satın al butonuna basıldığında, product-widget component’ i içerisinden bir event’ i içinde ürün bilgisi ile emit edip, üst component olan category’ e yolluyoruz ve ardından category component’ teki addToBasket metodu ile, ürünü sepete ekliyoruz.

Bu konuda anlatım yaparken daha önce oluşturduğumuz component’ leri kullanacağız. https://gelistir.net/340/angular-componentler-arasi-veri-paslama/ adresinden inceleyebilirsiniz.

Uygulamanın son hali;

Öncelikle product-widget’ ın template’ ine, satın al butonu ekleyip, click event’ ine ise addToBasket metodunu, product verisi ile ekliyoruz;

<div class="col-xs-4">
    <h3>{{product.name}}</h3>
    <p>Tasarımcı : {{product.designedBy}}</p>
    <button type="button" class="btn btn-default" (click) = "addToBasket(product)">Satın Al</button>
</div>

Angular’ da event işlemleri EventEmitter kütüphanesi ile yapılıyor.
Alt component’ ten üst component’ e veri akışını ise Output kütüphanesi ile yapılıyor.

Product-widget component’ te öncelikle import işlemlerini yapıyoruz;

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

Üst component’ e göndermek istediğimiz varlıkları, @Output() decorator ile tanımlamaya başlıyoruz;

@Output() addedToBasket = new EventEmitter<{}>();

"decorator | eventIsmi = EventObjesi" şeklinde bir sözdizimimiz var.

Az önce template’ de click event’ ine bağladığımız addToBasket isimli metodumuzu yazıyoruz;

addToBasket(product) {
    this.addedToBasket.emit({
        product
    });
  }

• Metod product verisini parametre olarak alıyor
• Yukarıda tanımladığımız event’ i product verisi ile emit ediyor.

Üst component olan category component’ in template’ in deki product-widget selector’ de event yakalama işlemini gerçekleştirmemiz lazım. Bunu şu şekilde yapıyoruz;

<app-product-widget *ngFor="let product of products" 
[product] = "product"
(addedToBasket) = "onAddedToBasket(product)"
>

Parantez içerisinde, yakalamak istediğimiz event’ in ismini yazıyoruz ve değer olarak da tetiklenmesini istediğimiz metodu yazıp, event’ ten gelen değeri içerisine ekliyoruz.

Artık Category Component’ te tetiklenen metodu yazıp, gelen veri ile işlemlerimizi yapabiliriz;

onAddedToBasket(product) {
      alert(product.name + ' sepete eklendi');
  }

product verimiz, product-widget’ tan ilgili event ile yola çıkıp, category component’ e kadar geldi, yakaladık ve onAddedToBasket metoduna paslandı.

Gerçek hayatta, bu veri server katmanına yapılacak bir xhr request ile gönderilir ve sepete eklenmiş olur. Lakin biz şimdilik sadece alert ile ekrana basıyoruz.