<\/div>\n

Merhaba,<\/p>\n

Biliyorsunuz ki, Angular uygulamalar\u0131 birbirinden ba\u011f\u0131ms\u0131z componentler arac\u0131l\u0131\u011f\u0131yla programatize edilmekte ve bu ba\u011f\u0131ms\u0131z componentler mod\u00fcl yap\u0131s\u0131nda birbirleriyle ili\u015fkilendirilerek b\u00fct\u00fcnsel hareket edilmesi sa\u011flanmaktad\u0131r. Tabi s\u00fcre\u00e7te bu uygulamalara ek olarak servis yap\u0131lar\u0131 vs. dahil olmakta ve projenin in\u015fas\u0131 s\u00fcrecinde bir\u00e7ok noktada birbirinden ba\u011f\u0131ms\u0131z ama birbirlerinin verisini yahut de\u011ferlerini kullanan katmansal yap\u0131lar ortaya \u00e7\u0131kmaktad\u0131r. \u0130\u015fte bu tarz durumlarda, bir yap\u0131n\u0131n i\u00e7erisindeki kullan\u0131lan de\u011ferde\/veride\/veri k\u00fcmesinde farkl\u0131 bir yap\u0131 i\u00e7erisinde olu\u015fan de\u011fi\u015fiklik\/g\u00fcncelleme durumlar\u0131ndan ilgili yap\u0131 i\u00e7erisinde haberdar olabilmek i\u00e7in tasarlanan DoCheck Interface’ini inceleyece\u011fiz.<\/p>\n

Tabi ki de konuyu \u00f6rnek bir senaryo \u00fczerinden de\u011ferlendirece\u011fiz.
\nSenaryomuzda; bir \u00fcr\u00fcn listesine bir component \u00fczerinden ekleme i\u015flemi ger\u00e7ekle\u015ftirirken di\u011fer bir componentte ise istatiksel i\u015flemler ger\u00e7ekle\u015ftirece\u011fiz. Her \u00fcr\u00fcn eklendi\u011finde iki component i\u00e7in ortak olan \u00fcr\u00fcn listesindeki yeni de\u011fi\u015fiklikleri DoCheck interface’i ile takip edecek ve istatiksel \u00e7al\u0131\u015fmalara yenilikleri yans\u0131taca\u011f\u0131z.<\/p>\n

O halde hemen ba\u015flayal\u0131m.<\/p>\n

\u00d6ncelikle \u00fcr\u00fcn modelimizi olu\u015ftural\u0131m.<\/p>\n

\r\n--- product.ts ---\r\n\r\nexport class Product {\r\n    id: number;\r\n    productName: string;\r\n    stock: number;\r\n    price: number;\r\n}\r\n<\/pre>\nArd\u0131ndan veri kayna\u011f\u0131 olarak kullanaca\u011f\u0131m\u0131z \u00fcr\u00fcn listesini sabit olarak olu\u015fturuyoruz.<\/p>\n
\r\n--- product-list.ts ---\r\n\r\nimport { Product } from ".\/product";\r\n\r\nexport const ProductList: Product[] = [\r\n    { id: 1, price: 100, stock: 50, productName: "Mouse" },\r\n    { id: 2, price: 200, stock: 10, productName: "Monit\u00f6r" },\r\n    { id: 3, price: 4500, stock: 3, productName: "Televizyon" },\r\n    { id: 4, price: 600, stock: 25, productName: "Kasa" },\r\n    { id: 5, price: 120, stock: 17, productName: "Klavye" }\r\n];\r\n<\/pre>\n\u015eimdi istatiksel \u00e7al\u0131\u015fmalar yapaca\u011f\u0131m\u0131z componentimizi olu\u015ftural\u0131m.<\/p>\n
\r\n--- product-statistics.components.ts ---\r\n\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { ProductList } from "..\/entitys\/product-list";\r\n@Component({\r\n  selector: 'app-product-statistics',\r\n  templateUrl: '.\/product-statistics.component.html',\r\n  styleUrls: ['.\/product-statistics.component.css']\r\n})\r\nexport class ProductStatisticsComponent implements OnInit {\r\n  constructor() { }\r\n  TotalPrice: number;\r\n  TotalItem: number;\r\n  ngOnInit() {\r\n    this.TotalPrice = ProductList.reduce((a, b) => a = a + b.price, 0);\r\n    this.TotalItem = ProductList.length;\r\n  }\r\n}\r\n<\/pre>\n\u0130statistik componentimizin html g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fcde ayarlayal\u0131m.<\/p>\n
\r\n--- product-statistics.components.html ---\r\n\r\n<div>\r\n  <span>\u00dcr\u00fcn Adedi<\/span>\r\n  {{TotalItem}}\r\n<\/div>\r\n<div>\r\n  <span>Toplam \u00dcr\u00fcn Fiyat\u0131<\/span>\r\n  {{TotalPrice}}\r\n<\/div>\r\n<\/pre>\nVe son olarak bu componenti yay\u0131nlamak i\u00e7in “app-product-statistics” se\u00e7icisini “app.component.html” dosyas\u0131nda etiket olarak belirtelim.<\/p>\n
Tabi bu belirtme i\u015flemine gelmeden \u00f6nce di\u011fer componentimide olu\u015fturmak istiyorum. Yani \u00fcr\u00fcn listemize ekleme i\u015flemini ger\u00e7ekle\u015ftirecek olan componenti. <\/p>\n
\r\n--- product-add.component.ts ---\r\n\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { ProductList } from '..\/entitys\/product-list';\r\nimport { Product } from '..\/entitys\/product';\r\n@Component({\r\n  selector: 'app-product-add',\r\n  templateUrl: '.\/product-add.component.html',\r\n  styleUrls: ['.\/product-add.component.css']\r\n})\r\nexport class ProductAddComponent implements OnInit {\r\n  constructor() { }\r\n  ngOnInit() {  }\r\n  addProduct() {\r\n    let product = new Product();\r\n    product.id = 6;\r\n    product.price = 100;\r\n    product.productName = "Yeni Eklenen Product";\r\n    product.stock = 50;\r\n    ProductList.push(product);\r\n  }\r\n}\r\n<\/pre>\nBurada dikkat ederseniz e\u011fer manuel olarak yeni bir product olu\u015fturulup listeye eklenmi\u015ftir. Bunun sebebi Angular yaz\u0131 dizimizin i\u00e7eriksel hiyerar\u015fisine itaatimdendir. \u00c7\u00fcnk\u00fc daha Angular 4 Form uygulamalar\u0131 \u00fczerine bir \u00e7al\u0131\u015fma yay\u0131nlamad\u0131\u011f\u0131mdan dolay\u0131 bu k\u0131s\u0131mda mevcut \u015fekilde bir y\u00f6nteme ba\u015fvurmay\u0131 tercih etmi\u015f bulunmaktay\u0131m.<\/p>\n
Html k\u0131sm\u0131n\u0131da in\u015fa edersek e\u011fer;<\/p>\n
\r\n--- product-add.component.html ---\r\n\r\n<button type="button" class="btn btn-primary" (click)="addProduct()">\u00dcr\u00fcn Ekle<\/button>\r\n<\/pre>\nEvet… \u015eimdi bu componentin “app-product-add” se\u00e7icisinide “app.component.html” dosyas\u0131na etiket olarak belirtebiliriz.<\/p>\n
\r\n--- app.component.html ---\r\n\r\n<div class="panel panel-default">\r\n    <div class="panel-body">\u0130statikler<\/div>\r\n    <app-product-statistics><\/app-product-statistics>\r\n<\/div>\r\n<div class="panel panel-default">\r\n    <div class="panel-body">\u00dcr\u00fcn Ekle<\/div>\r\n    <app-product-add><\/app-product-add>\r\n<\/div>\r\n<\/pre>\n\u00c7al\u0131\u015fman\u0131n g\u00f6rselinden anla\u015f\u0131labilirli\u011fi artt\u0131rmak i\u00e7in bootsrap kullan\u0131lm\u0131\u015ft\u0131r. Angular’a nas\u0131l entegre edilece\u011fini \u00f6\u011frenmek i\u00e7in buradaki<\/a> makaleyi inceleyebilirsiniz.<\/span><\/p>\n
\u015eimdi bu uygulamay\u0131 kaydedip, yay\u0131nlarsak e\u011fer a\u015fa\u011f\u0131daki gibi \u00fcr\u00fcn eklemeye \u00e7al\u0131\u015ft\u0131\u011f\u0131m\u0131zda bir sorunla kar\u015f\u0131la\u015f\u0131lmaktad\u0131r.
\n<\/a>
\nProgramatik olarak \u00fcr\u00fcn\u00fcm\u00fcz listeleye eklensede bu de\u011fi\u015fiklik istatiksel neticeye yans\u0131mamaktad\u0131r.<\/p>\n
Peki bunun sebebi nedir?<\/strong> sorusunun cevab\u0131n\u0131 sizlerin verebiliyor oldu\u011funuzu biliyorum. Lakin ola ki \u015fu ana kadar g\u00f6zden ka\u00e7\u0131rd\u0131\u011f\u0131n\u0131z noktalar\u0131n olabilmesi yahut farkl\u0131 noktaya odaklanabilme ihtimalinizden dolay\u0131 bu durumun neden kaynakland\u0131\u011f\u0131n\u0131 d\u00fc\u015f\u00fcnemiyor olabilirsiniz. O y\u00fczden cevab\u0131 \u00e7ok kolay olan bu soruya bende kar\u015f\u0131l\u0131k verece\u011fim.<\/p>\n
“product-statistics.component.ts” s\u0131n\u0131f\u0131 i\u00e7erisinde yap\u0131lan i\u015flemler \u00fcr\u00fcn listemizin gerekli istatiksel verilerini “ngOnInit” event\u0131nda elde etmekte ve bunlar\u0131 viewa yans\u0131tmaktad\u0131r. Yani componentin ilk viewi a\u00e7\u0131ld\u0131\u011f\u0131nda tetiklenen “ngOnInit” event\u0131 tek seferli\u011fine bu i\u015flemi ger\u00e7ekle\u015ftirmi\u015f olmaktad\u0131r. Lakin ayn\u0131 \u00fcr\u00fcn listesini “product-add.component.ts” s\u0131n\u0131f\u0131 kullanarak yeni veriler eklemekte ama bu yeniliklerden istatiksel componentimizin haberi olmamaktad\u0131r.<\/p>\n
\u0130\u015fte b\u00f6yle bir durum i\u00e7in “DoCheck” interface’i geli\u015ftirilmi\u015ftir. “@angular\/core” alt\u0131nda bulunan bu interface, uygulama boyunca ilgili componente \u00f6zel tan\u0131mlanm\u0131\u015f t\u00fcm de\u011ferlere subscribe(abone) olmakta ve “ngDoCheck” isminde implement edece\u011fi fonksiyon sayesinde bu de\u011ferlerdeki herhangi bir de\u011fi\u015fikli\u011fi bizlere bildirmektedir.<\/p>\n
\r\n--- product-statistics.component.ts ---\r\n\r\nimport { Component, OnInit, DoCheck } from '@angular\/core';\r\nimport { ProductList } from "..\/entitys\/product-list";\r\n@Component({\r\n  selector: 'app-product-statistics',\r\n  templateUrl: '.\/product-statistics.component.html',\r\n  styleUrls: ['.\/product-statistics.component.css']\r\n})\r\nexport class ProductStatisticsComponent implements OnInit, DoCheck {\r\n  constructor() { }\r\n  TotalPrice: number;\r\n  TotalItem: number;\r\n  ngOnInit() {  }\r\n  ngDoCheck() {\r\n    this.TotalPrice = ProductList.reduce((a, b) => a = a + b.price, 0);\r\n    this.TotalItem = ProductList.length;\r\n  }\r\n}\r\n<\/pre>\nYukar\u0131daki kod blo\u011funda g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere “ngOnInit” event\u0131ndaki komutlar “ngDoCheck” event\u0131na al\u0131nm\u0131\u015ft\u0131r. Bunun sebebi de biraz \u00f6nce anlatmaya \u00e7al\u0131\u015ft\u0131\u011f\u0131m mant\u0131kta hareket ederek, var olan yeniliklerde o yeni de\u011ferler \u00fczerinden i\u015flemler ger\u00e7ekle\u015ftirmek i\u00e7in “ngDoCheck” event\u0131nda \u00e7al\u0131\u015f\u0131lmaktad\u0131r.<\/p>\n\u0130\u015fte bu \u015fekilde uygulamam\u0131z\u0131 kaydedip, yay\u0131nlad\u0131\u011f\u0131m\u0131zda a\u015fa\u011f\u0131daki gibi \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6rebileceksiniz.
\n<\/a><\/p>\n
Bu i\u00e7eri\u011fimizde birbirinden ba\u011f\u0131ms\u0131z \u00e7al\u0131\u015fan ama ortak veri yap\u0131lar\u0131n\u0131 kullanan componentler \u00fczerinde ger\u00e7ekle\u015fecen verisel i\u015flemlerin, t\u00fcm componentlerde nas\u0131l takip edildi\u011fini ve bu i\u015flem i\u00e7in DoCheck interface’inin nas\u0131l kullan\u0131ld\u0131\u011f\u0131na de\u011finmi\u015f olduk.<\/p>\n
Bol bol faydalanman\u0131z dile\u011fiyle…<\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Biliyorsunuz ki, Angular uygulamalar\u0131 birbirinden ba\u011f\u0131ms\u0131z componentler arac\u0131l\u0131\u011f\u0131yla programatize edilmekte ve bu ba\u011f\u0131ms\u0131z componentler mod\u00fcl yap\u0131s\u0131nda birbirleriyle ili\u015fkilendirilerek b\u00fct\u00fcnsel hareket edilmesi sa\u011flanmaktad\u0131r. Tabi s\u00fcre\u00e7te bu uygulamalara ek olarak servis yap\u0131lar\u0131 vs. dahil olmakta...<\/p>\n","protected":false},"author":1,"featured_media":7246,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2144],"tags":[2310,2311,2309,2312,2308,2307,2313],"class_list":["post-7810","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-4","tag-angular-4-docheck","tag-angular-4-docheck-interface","tag-angular-docheck","tag-angular-docheck-interface","tag-docheck","tag-docheck-interface","tag-ngdocheck"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7810","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=7810"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7810\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/7246"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=7810"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=7810"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=7810"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}