{"id":13330,"date":"2020-02-16T12:38:04","date_gmt":"2020-02-16T12:38:04","guid":{"rendered":"https:\/\/www.gencayyildiz.com\/blog\/?p=13330"},"modified":"2020-02-16T12:38:04","modified_gmt":"2020-02-16T12:38:04","slug":"angularda-input-ve-output-degiskenler-ile-componentler-arasi-iletisim","status":"publish","type":"post","link":"https:\/\/www.gencayyildiz.com\/blog\/angularda-input-ve-output-degiskenler-ile-componentler-arasi-iletisim\/","title":{"rendered":"Angular’da @Input ve @Output De\u011fi\u015fkenler \u0130le Componentler Aras\u0131 \u0130leti\u015fim"},"content":{"rendered":"

<\/div>\n

Merhaba,<\/p>\n

G\u00fcn\u00fcm\u00fcz UI mimarilerinin bir\u00e7o\u011fu, birbirlerinden ba\u011f\u0131ms\u0131z olacak \u015fekilde geli\u015ftirilen bile\u015fen(component) yap\u0131lanmalar\u0131n\u0131n bir araya gelmesi neticesinde b\u00fct\u00fcn\u00fcn olu\u015fturulmas\u0131 ve b\u00f6ylece uygulaman\u0131n y\u00f6netilebilir ve \u00f6l\u00e7eklendirilebilir par\u00e7alardan meydana getirilmesi mant\u0131\u011f\u0131na dayal\u0131 bir yakla\u015f\u0131m benimsemektedirler. Haliyle bu yakla\u015f\u0131m\u0131n bayraktarl\u0131\u011f\u0131n\u0131 yapan ve bir\u00e7ok mimari yahut k\u00fct\u00fcphaneye bu konuda \u00f6n ayak olan Angular mimarisinde, b\u00fct\u00fcn\u00fcn par\u00e7alar\u0131 olan componentlerde @Input<\/strong><\/em> ve @Output<\/strong><\/em> de\u011fi\u015fkenlerinin nas\u0131l bir rol ald\u0131klar\u0131n\u0131 ve componentler aras\u0131 ileti\u015fimi nas\u0131l sa\u011flad\u0131klar\u0131n\u0131 inceleyece\u011fiz.<\/p>\n

\u0130lk olarak kavramsal de\u011ferlendirmeyi anla\u015f\u0131l\u0131r k\u0131labilmek i\u00e7in \u00f6ncelikle componentler aras\u0131 ili\u015fkilendirmeyi ele alarak netle\u015ftirmek gerekmektedir. Bunun i\u00e7in bir Angular uygulamas\u0131 olu\u015fturunuz ve ard\u0131ndan i\u00e7erisine “A” ve “B” olmak \u00fczere iki adet component ekleyiniz. Ard\u0131ndan “A” componentinin g\u00f6r\u00fcnt\u00fcs\u00fcnde “B” componentini referans ediniz.
\n $\"Angular'da$ <\/a><\/p>\n

\u0130\u015fte bu ili\u015fki neticesinde terminoloji devreye girmekte ve “A” componentine “Parent Component”, “B” componentine ise “Child Component” denmektedir.
\n $\"Angular'da$ <\/a><\/p>\n

Bu bilgiler e\u015fli\u011finde art\u0131k @Input ve @Output de\u011fi\u015fkenleri a\u00e7\u0131klayabiliriz.<\/p>\n\n\n\n\n\n\n\n
@Input<\/th>\n<\/tr>\n<\/thead>\n
Parent componentten(A) Child componente(B) veri g\u00f6ndermek i\u00e7in kullan\u0131lan de\u011fi\u015fkendir.<\/td>\n<\/tr>\n
\n‘b.component.ts’ i\u00e7eri\u011fi;<\/p>\n
\r\nimport { Component, OnInit, Input } from '@angular\/core';\r\n@Component({\r\n selector: 'app-b',\r\n templateUrl: '.\/b.component.html',\r\n styleUrls: ['.\/b.component.css']\r\n})\r\nexport class BComponent implements OnInit {\r\n constructor() { }\r\n @Input() data: string;\r\n ngOnInit(): void {\r\n console.log(`A'dan B'ye '${this.data}' de\u011feri g\u00f6nderilmi\u015ftir.`);\r\n }\r\n}\r\n<\/pre>\n
‘a.component.ts’ i\u00e7eri\u011fi;<\/p>\n
\r\n<app-b data="Merhaba"><\/app-b>\r\n<\/pre>\n
Burada g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere “B” componenti i\u00e7erisindeki @Input data de\u011fi\u015fkenine attribute k\u0131vam\u0131nda eri\u015febilmekte ve istedi\u011fimiz de\u011feri g\u00f6nderebilmekteyiz.<\/p>\n
\u00c7\u0131kt\u0131 olarak;
\n $\"Angular'da$ <\/a>\n<\/td>\n<\/tr>\n
<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n\n\n\n
@Output<\/th>\n<\/tr>\n<\/thead>\n
Child componentten(B) Parent componente(A) veri g\u00f6ndermek i\u00e7in kullan\u0131lan de\u011fi\u015fkendir.<\/td>\n<\/tr>\n
\n‘b.component.ts’ i\u00e7eri\u011fi;<\/p>\n
\r\nimport { Component, OnInit, Input, Output, EventEmitter } from '@angular\/core';\r\n@Component({\r\n selector: 'app-b',\r\n templateUrl: '.\/b.component.html',\r\n styleUrls: ['.\/b.component.css']\r\n})\r\nexport class BComponent implements OnInit {\r\n constructor() { }\r\n @Output() myevent: EventEmitter<any> = new EventEmitter();\r\n ngOnInit(): void {\r\n this.myevent.emit({ message: "Merhaba" });\r\n }\r\n}\r\n<\/pre>\n
‘a.component.html’ i\u00e7eri\u011fi;<\/p>\n
\r\n<app-b (myevent)="click($event)"><\/app-b>\r\n<\/pre>\n
Burada da dikkat edilirse ‘b.component.ts’ i\u00e7erisinde tan\u0131mlanan @Output t\u00fcr\u00fcndeki “myevent” de\u011fi\u015fkeni “A” g\u00f6r\u00fcnt\u00fcs\u00fc i\u00e7erisindeki referans\u0131nda event olarak kullan\u0131labilmekte ve ta\u015f\u0131d\u0131\u011f\u0131 de\u011feride ‘$event’ parametresiyle yakalayabilmektedir.<\/p>\n
‘a.component.ts’ i\u00e7eri\u011fi;<\/p>\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\n\r\n@Component({\r\n selector: 'app-a',\r\n templateUrl: '.\/a.component.html',\r\n styleUrls: ['.\/a.component.css']\r\n})\r\nexport class AComponent implements OnInit {\r\n constructor() { }\r\n ngOnInit(): void { }\r\n\r\n click(data) {\r\n console.log(`B'den A'ya ${data.message} nesnesi g\u00f6nderilmi\u015ftir.`);\r\n }\r\n}\r\n<\/pre>\n
$\"Angular'da$ <\/a>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
@Input ve @Output yap\u0131lanmas\u0131n\u0131n yukar\u0131da pratik olarak ele ald\u0131\u011f\u0131m\u0131z \u00e7al\u0131\u015fma mant\u0131\u011f\u0131n\u0131 a\u015fa\u011f\u0131daki g\u00f6rselde daha da somutla\u015ft\u0131rarak inceleyebilirsiniz.
\n $\"\"$ <\/a><\/p>\n
\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle…
\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, G\u00fcn\u00fcm\u00fcz UI mimarilerinin bir\u00e7o\u011fu, birbirlerinden ba\u011f\u0131ms\u0131z olacak \u015fekilde geli\u015ftirilen bile\u015fen(component) yap\u0131lanmalar\u0131n\u0131n bir araya gelmesi neticesinde b\u00fct\u00fcn\u00fcn olu\u015fturulmas\u0131 ve b\u00f6ylece uygulaman\u0131n y\u00f6netilebilir ve \u00f6l\u00e7eklendirilebilir par\u00e7alardan meydana getirilmesi mant\u0131\u011f\u0131na dayal\u0131 bir yakla\u015f\u0131m benimsemektedirler. Haliyle bu...<\/p>\n","protected":false},"author":1,"featured_media":13345,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2420,2144,2415,2599,2756,3018,3155],"tags":[2156,3152,3151,3149,3150,3154,3153],"class_list":["post-13330","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-angular-4","category-angular-5","category-angular-6","category-angular-7","category-angular-8","category-angular-9","tag-angular","tag-angular-9","tag-angular-componentler-arasi-iletisim","tag-angularda-input-degiskenler","tag-angularda-output-degiskenler","tag-child-component","tag-parent-component"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/13330","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=13330"}],"version-history":[{"count":33,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/13330\/revisions"}],"predecessor-version":[{"id":13369,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/13330\/revisions\/13369"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/13345"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=13330"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=13330"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=13330"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}