<\/div>\n
Merhaba,<\/p>\n
Bir \u00f6nceki Angular 4 Routing Mekanizmas\u0131<\/a> ba\u015fl\u0131kl\u0131 makalemde Angular’da Routing mekanizmas\u0131n\u0131 incelemi\u015ftik. Bu i\u00e7eri\u011fimizde ise olu\u015fturdu\u011fumuz route’larda nas\u0131l parametre tan\u0131mlayaca\u011f\u0131m\u0131z\u0131 ve bu tan\u0131mlad\u0131\u011f\u0131m\u0131z parametreleri nas\u0131l okuyaca\u011f\u0131m\u0131z\u0131 inceleyece\u011fiz.<\/p>\n
Angular’da routes \u015fablonlar\u0131n\u0131 olu\u015ftururken biryandan da istedi\u011finiz route’a a\u015fa\u011f\u0131daki gibi parametre tan\u0131mlayabilirsiniz.<\/p>\n
\r\nexport const AppRoutes: Routes = [\r\n    { path: "page\/:content", component: PageComponent }\r\n];\r\n<\/pre>\nDikkat ederseniz “path” de\u011ferinde beklenen ana adresin yan\u0131na “\/:” karakterleri e\u015fli\u011finde parametre tan\u0131mlayabilmekteyiz. Bahsedilen \u015fekilde yukar\u0131da “content” isimli bir parametre tan\u0131mlanm\u0131\u015ft\u0131r.<\/p>\n
\u015eimdi gelin bu parametreyi kullanal\u0131m;<\/p>\n\r\n<div class="row">\r\n  <div class="list-group">\r\n    <a routerLink="page\/a" [routerLinkActiveOptions]="{exact:true}" routerLinkActive="active" class="list-group-item list-group-item-action">ASayfas\u0131<\/a>\r\n    <a routerLink="page\/b" [routerLinkActiveOptions]="{exact:true}" routerLinkActive="active" class="list-group-item list-group-item-action">BSayfas\u0131<\/a>\r\n    <a routerLink="page\/c" [routerLinkActiveOptions]="{exact:true}" routerLinkActive="active" class="list-group-item list-group-item-action">CSayfas\u0131<\/a>\r\n  <\/div>\r\n  <div>\r\n    <router-outlet><\/router-outlet>\r\n  <\/div>\r\n<\/div>\r\n<\/pre>\nDikkat!!!
\nRouting yap\u0131lanmas\u0131na dair t\u00fcm teferruatlar\u0131n Angular 4 Routing Mekanizmas\u0131<\/a> isimli makalede oldu\u011fu gibi uyguland\u0131\u011f\u0131n\u0131 varsayarak konumuza devam ediyoruz.<\/strong><\/em>\n<\/p><\/blockquote>\n
Yukar\u0131daki kod blo\u011funu incelerseniz e\u011fer “routerLink” \u00f6zelli\u011fine tan\u0131mlanan adreslerde “content” parametresine verilen de\u011ferler a\u015fikard\u0131r. Bu adreslere t\u0131kland\u0131\u011f\u0131nda;
\n<\/a>
\ng\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi linkler tetiklenmektedir. Tetiklenme sonucunda uygulama parametre olarak hangi de\u011ferin verildi\u011fini do\u011fal olarak bilemeyecek, bilsede(ki \u015fu durumda m\u00fcmk\u00fcn de\u011fil<\/span>) bu parametrelere kar\u015f\u0131l\u0131k ne t\u00fcr bir i\u015flem uygulayaca\u011f\u0131n\u0131 bilemeyecektir.<\/p>\n
O halde bizim ilk olarak “PageComponent” isimli component \u00fczerinde parametreye verilen de\u011ferleri elde etmemiz gerekmektedir. Bu i\u015flemide “@angular\/router” dizininde bulunan “ActivatedRoute” isimli servis sayesinde ger\u00e7ekle\u015ftirmekteyiz. <\/p>\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { ActivatedRoute } from "@angular\/router";\r\n@Component({\r\n  selector: 'app-page',\r\n  templateUrl: '.\/page.component.html',\r\n  styleUrls: ['.\/page.component.css']\r\n})\r\nexport class PageComponent implements OnInit {\r\n  contentParam: string;\r\n  constructor(private activatedRoute: ActivatedRoute) { }\r\n  ngOnInit() {\r\n    this.activatedRoute.params.subscribe(p => {\r\n      this.contentParam = p["content"];\r\n    });\r\n  }\r\n}\r\n<\/pre>\nYukar\u0131daki kod blo\u011funu incelerseniz e\u011fer; route parametreleri “ActivatedRoute” servisi sayesinde okunabilmektedir. Tabi burada dikkat ederseniz e\u011fer “ActivatedRoute” asenkron bir \u015fekilde \u00e7al\u0131\u015fmaktad\u0131r ve bizim route parametrelerini okuyabilmemiz i\u00e7in mutlaka subscribe(abone) olmam\u0131z gerekmektedir. Ancak bu \u015fekilde bir parametreye de\u011fer verildi\u011finde yakalayabilmekteyiz.<\/p>\n
Son olarak “page.component.html” sayfas\u0131n\u0131 a\u015fa\u011f\u0131daki gibi d\u00fczenleyelim;<\/p>\n\r\n<p>\r\n  {{contentParam}}\r\n<\/p>\r\n<\/pre>\nve bu i\u015flemden sonra \u00e7al\u0131\u015fmam\u0131z\u0131 kaydedip, yay\u0131nlad\u0131\u011f\u0131m\u0131zda a\u015fa\u011f\u0131daki gibi route’a verilen parametreye ula\u015f\u0131l\u0131p, ekrana yazd\u0131r\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6rebiliriz.
\n<\/a><\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bir \u00f6nceki Angular 4 Routing Mekanizmas\u0131 ba\u015fl\u0131kl\u0131 makalemde Angular’da Routing mekanizmas\u0131n\u0131 incelemi\u015ftik. Bu i\u00e7eri\u011fimizde ise olu\u015fturdu\u011fumuz route’larda nas\u0131l parametre tan\u0131mlayaca\u011f\u0131m\u0131z\u0131 ve bu tan\u0131mlad\u0131\u011f\u0131m\u0131z parametreleri nas\u0131l okuyaca\u011f\u0131m\u0131z\u0131 inceleyece\u011fiz. Angular’da routes \u015fablonlar\u0131n\u0131 olu\u015ftururken biryandan da...<\/p>\n","protected":false},"author":1,"featured_media":7986,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[2347,2348,2339,2350,2349],"class_list":["post-7968","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-genel","tag-activatedroute","tag-angular-4-routing","tag-angular-routing","tag-angular-routing-parameters","tag-angular-routing-parametre"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7968","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=7968"}],"version-history":[{"count":15,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7968\/revisions"}],"predecessor-version":[{"id":7987,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7968\/revisions\/7987"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/7986"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=7968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=7968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=7968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}