Angular, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc ve esnek bir \u00e7er\u00e7evedir. Bu \u00e7er\u00e7evenin temel ta\u015flar\u0131ndan biri, uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmlerini olu\u015fturan bile\u015fenlerdir. Ancak bir uygulaman\u0131n i\u015flevselli\u011fi, bu bile\u015fenlerin izole bir \u015fekilde \u00e7al\u0131\u015fmas\u0131ndan ziyade, birbirleriyle etkile\u015fim kurma yeteneklerine ba\u011fl\u0131d\u0131r. Bile\u015fenler aras\u0131 ileti\u015fim, uygulaman\u0131n karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 y\u00f6netmek, kod tekrar\u0131n\u0131 azaltmak ve daha mod\u00fcler yap\u0131lar olu\u015fturmak i\u00e7in hayati \u00f6neme sahiptir. Bu makalede, Angular’da bile\u015fenler aras\u0131 ileti\u015fimin en \u00f6nemli y\u00f6ntemlerinden biri olan “\u00c7\u0131kt\u0131lar (Outputs)” mekanizmas\u0131n\u0131, yani alt bile\u015fenlerden \u00fcst bile\u015fenlere veri veya olay ak\u0131\u015f\u0131n\u0131 derinlemesine inceleyece\u011fiz.<\/p>\n
Angular uygulamalar\u0131, genellikle bir bile\u015fen a\u011fac\u0131 \u015feklinde organize edilir. En \u00fcstte bir k\u00f6k bile\u015fen (\u00f6rne\u011fin Angular, bu t\u00fcr ileti\u015fim senaryolar\u0131n\u0131 y\u00f6netmek i\u00e7in \u00e7e\u015fitli mekanizmalar sunar: Bu makalede odak noktam\u0131z, alt bile\u015fenlerin \u00fcst bile\u015fenlere nas\u0131l bilgi aktard\u0131\u011f\u0131d\u0131r: Alt bile\u015fenlerin \u00fcst bile\u015fenlere olay veya veri g\u00f6ndermesini sa\u011flayan Angular mekanizmas\u0131, Bir S\u00f6zdizimi \u015fu \u015fekildedir:<\/p>\nAppComponent<\/code>) bulunur ve bu bile\u015fen, alt bile\u015fenleri bar\u0131nd\u0131r\u0131r. Bu alt bile\u015fenler de kendi alt bile\u015fenlerine sahip olabilir. Bu hiyerar\u015fik yap\u0131 i\u00e7erisinde, farkl\u0131 seviyelerdeki bile\u015fenlerin birbirleriyle konu\u015fmas\u0131 gerekir. \u00d6rne\u011fin, bir “\u00fcr\u00fcn kart\u0131” bile\u015feni (alt bile\u015fen), “sepete ekle” d\u00fc\u011fmesine t\u0131kland\u0131\u011f\u0131nda bu bilgiyi “sepet” bile\u015fenine (\u00fcst bile\u015fen) iletmek isteyebilir. Ya da bir “form alan\u0131” bile\u015feni, kullan\u0131c\u0131n\u0131n girdi\u011fi veriyi ana “form” bile\u015fenine bildirmelidir.<\/p>\n
\n* @Input<\/code> Dekorat\u00f6r\u00fc:<\/strong> \u00dcst bile\u015fenden alt bile\u015fene veri ak\u0131\u015f\u0131 i\u00e7in kullan\u0131l\u0131r. (“A\u015fa\u011f\u0131 ak\u0131\u015fl\u0131 ileti\u015fim”)
\n* @Output<\/code> Dekorat\u00f6r\u00fc ve EventEmitter<\/code>:<\/strong> Alt bile\u015fenden \u00fcst bile\u015fene olay veya veri ak\u0131\u015f\u0131 i\u00e7in kullan\u0131l\u0131r. (“Yukar\u0131 ak\u0131\u015fl\u0131 ileti\u015fim”)
\n* Servisler:<\/strong> Ba\u011f\u0131ms\u0131z bile\u015fenler aras\u0131nda veya ayn\u0131 seviyedeki bile\u015fenler aras\u0131nda genel durum y\u00f6netimi ve veri payla\u015f\u0131m\u0131 i\u00e7in kullan\u0131l\u0131r.
\n* ViewChild<\/code> \/ ViewChildren<\/code>:<\/strong> \u00dcst bile\u015fenin alt bile\u015fenlerine do\u011frudan eri\u015fimini sa\u011flar, ancak genellikle ka\u00e7\u0131n\u0131lmas\u0131 gereken bir y\u00f6ntemdir \u00e7\u00fcnk\u00fc bile\u015fenler aras\u0131ndaki ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 art\u0131r\u0131r.<\/p>\n@Output<\/code> ve EventEmitter<\/code> kullanarak yukar\u0131 ak\u0131\u015fl\u0131 ileti\u015fim. Bu mekanizma, bile\u015fenler aras\u0131nda g\u00fc\u00e7l\u00fc bir ayr\u0131m (decoupling) sa\u011flar ve bile\u015fenlerin yeniden kullan\u0131labilirli\u011fini art\u0131r\u0131r.<\/p>\n@Output<\/code> ve EventEmitter<\/code>‘\u0131n Temelleri<\/h3>\n@Output<\/code> dekorat\u00f6r\u00fc ve EventEmitter<\/code> s\u0131n\u0131f\u0131n\u0131n birle\u015fimidir.<\/p>\nEventEmitter<\/code> S\u0131n\u0131f\u0131<\/h4>\nEventEmitter<\/code>, Angular’\u0131n @angular\/core<\/code> mod\u00fcl\u00fcnden gelen \u00f6zel bir s\u0131n\u0131ft\u0131r. Ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, olaylar\u0131 yaymak (emit etmek) i\u00e7in kullan\u0131l\u0131r. Bir EventEmitter<\/code> nesnesi, bir olay meydana geldi\u011finde dinleyicilere bildirim g\u00f6nderen bir yay\u0131nc\u0131 gibi \u00e7al\u0131\u015f\u0131r. EventEmitter<\/code>, asl\u0131nda RxJS k\u00fct\u00fcphanesindeki Subject<\/code> s\u0131n\u0131f\u0131n\u0131n Angular’a \u00f6zel bir t\u00fcrevidir ve RxJS’in reaktif programlama yeteneklerini kullan\u0131r.<\/p>\nEventEmitter<\/code>‘\u0131 kullan\u0131rken genellikle bir jenerik tip (generic type) belirtiriz. Bu, yay\u0131lan verinin tipini tan\u0131mlamam\u0131z\u0131 sa\u011flar ve tip g\u00fcvenli\u011fini art\u0131r\u0131r. \u00d6rne\u011fin, EventEmitterEventEmitterEventEmitter<\/code> anlam\u0131na gelir.<\/p>\nEventEmitter<\/code>‘\u0131n temel metodu emit()<\/code>‘tir. Bu metod, EventEmitter<\/code> nesnesinin dinleyicilerine bir olay g\u00f6nderir ve iste\u011fe ba\u011fl\u0131 olarak bu olayla birlikte veri ta\u015f\u0131yabilir.<\/p>\n@Output<\/code> Dekorat\u00f6r\u00fc<\/h4>\n@Output<\/code> dekorat\u00f6r\u00fc, bir bile\u015fenin belirli bir olay yay\u0131c\u0131s\u0131n\u0131 (EventEmitter) d\u0131\u015f d\u00fcnyaya, yani \u00fcst bile\u015fenlerine a\u00e7\u0131k hale getirdi\u011fini belirtir. Bir bile\u015fen s\u0131n\u0131f\u0131n\u0131n bir \u00f6zelli\u011fine @Output<\/code> uyguland\u0131\u011f\u0131nda, bu \u00f6zellik, \u00fcst bile\u015fenin HTML \u015fablonunda bir olay ba\u011flama hedefi olarak kullan\u0131labilir hale gelir.<\/p>\nimport { Component, Output, EventEmitter } from '@angular\/core';\n\n@Component({\n selector: 'app-alt-bile\u015fen',\n template: \n