<\/div>\n
Merhaba,<\/p>\n
\u00d6nceki yaz\u0131lar\u0131mdan Angular 4 Routing Mekanizmas\u0131<\/a> ba\u015fl\u0131kl\u0131 makalemde Angular ile routing i\u015flemlerinin nas\u0131l ger\u00e7ekle\u015ftirildi\u011fini ele alm\u0131\u015ft\u0131k. Bu i\u00e7eri\u011fimizde ise Angular’da Routing Navigation ile bir componentten bir ba\u015fka componente y\u00f6nlendirilme i\u015flemini inceleyece\u011fiz.<\/p>\n
Diyelim ki; “AComponent”, “BComponent”, “CComponent” ve “ErrorComponent” olmak \u00fczere d\u00f6rt adet componentimiz olsun ve route yap\u0131lanmas\u0131da a\u015fa\u011f\u0131daki gibi olsun.<\/p>\n
\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\nimport { Router, RouterModule, Routes } from "@angular\/router";\r\n\r\nimport { AppComponent } from '.\/app.component';\r\nimport { AComponent } from '.\/a\/a.component';\r\nimport { BComponent } from '.\/b\/b.component';\r\nimport { CComponent } from '.\/c\/c.component';\r\nimport { ErrorComponent } from '.\/error\/error.component';\r\n\r\nexport const AppRoutes: Routes = [\r\n  { path: "", redirectTo: "acomponent", pathMatch: "full" },\r\n  { path: "acomponent", component: AComponent },\r\n  { path: "bcomponent", component: BComponent },\r\n  { path: "ccomponent", component: CComponent },\r\n  { path: "**", component: ErrorComponent }\r\n];\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent,\r\n    AComponent,\r\n    BComponent,\r\n    CComponent,\r\n    ErrorComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    RouterModule.forRoot(AppRoutes)\r\n  ],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\nAna componentimiz olan “AppComponent” \u00fczerinde de a\u015fa\u011f\u0131daki gibi \u00e7al\u0131\u015fmalar ger\u00e7ekle\u015ftirilmi\u015f olsun.<\/p>\n\r\n<div class="row">\r\n  <div class="list-group">\r\n    <a routerLink="acomponent" [routerLinkActiveOptions]="{exact:true}" routerLinkActive="active" class="list-group-item list-group-item-action active">ASayfas\u0131<\/a>\r\n    <a routerLink="bcomponent" [routerLinkActiveOptions]="{exact:true}" routerLinkActive="active" class="list-group-item list-group-item-action">BSayfas\u0131<\/a>\r\n    <a routerLink="ccomponent" [routerLinkActiveOptions]="{exact:true}" routerLinkActive="active" class="list-group-item list-group-item-action">CSayfas\u0131<\/a>\r\n    <a routerLink="errorcomponent" routerLinkActive="active" class="list-group-item list-group-item-action">ErrorSayfas\u0131<\/a>\r\n  <\/div>\r\n  <div>\r\n    <router-outlet><\/router-outlet>\r\n  <\/div>\r\n<\/div>\r\n<\/pre>\nE\u011fer ki uygulaman\u0131z\u0131 herhangi bir noktada herhangi bir componente y\u00f6nlendirmek istiyorsan\u0131z e\u011fer routing navigation kullanabilirsiniz. Biz burada \u00f6rnek olarak hata al\u0131nd\u0131\u011f\u0131 zaman “ErrorComponent” i\u00e7erisinde tekrardan uygulamay\u0131 “AComponent”e y\u00f6nlendirece\u011fiz.<\/p>\n\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { Router } from "@angular\/router";\r\n@Component({\r\n  selector: 'app-error',\r\n  templateUrl: '.\/error.component.html',\r\n  styleUrls: ['.\/error.component.css']\r\n})\r\nexport class ErrorComponent implements OnInit {\r\n\r\n  constructor(private route: Router) { }\r\n\r\n  ngOnInit() {\r\n    this.route.navigate(["acomponent"]);\r\n    alert("Hata sayfas\u0131ndan bu sayfaya y\u00f6nlendirildiniz.")\r\n  }\r\n}\r\n<\/pre>\nYukar\u0131daki kod blo\u011funa dikkat ederseniz e\u011fer “@angular\/router” dizininden import edilen “Router” mod\u00fcl\u00fcn\u00fc kullanmaktay\u0131z. Bu mod\u00fcl \u00fczerinden gerekli navigate fonksiyonuna eri\u015fmekte ve istenilen componente y\u00f6nlendirme i\u015flemi ger\u00e7ekle\u015ftirilmektedir.<\/p>\n<\/a><\/p>\n
G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere y\u00f6nlendirme i\u015flemimiz kolay bir \u015fekilde ba\u015far\u0131yla ger\u00e7ekle\u015ftirilmi\u015ftir.<\/p>\n
\r\nexport const AppRoutes: Routes = [\r\n  { path: "", redirectTo: "acomponent\/:params", pathMatch: "full" },\r\n  { path: "acomponent\/:params", component: AComponent },\r\n  { path: "bcomponent", component: BComponent },\r\n  { path: "ccomponent", component: CComponent },\r\n  { path: "**", component: ErrorComponent }\r\n];\r\n<\/pre>\nE\u011fer ki y\u00f6nlendirme yap\u0131lacak route yap\u0131lanmas\u0131 yukar\u0131daki gibi parametre al\u0131yorsa a\u015fa\u011f\u0131daki gibi ilgili parametreye de\u011fer g\u00f6nderebiliriz.<\/p>\n\r\nthis.route.navigate(["acomponent", "parametreDegeri"]);\r\n<\/pre>\n<\/a>
\nBurada navigate fonksiyonun dizi tipinde olan ilk parametresinde \u015f\u00f6yle bir genellemeye varabiliriz… Dizinin her bir eleman\u0131 farkl\u0131 bir parametre ya da dizinmi\u015f gibi y\u00f6nlendirme linkine eklenecektir.
\n\u00d6rne\u011fin;<\/p>\n
\r\nthis.route.navigate(["acomponent", "parametreDegeri", "deger2", "deger3", ., ., .]);\r\n<\/pre>\n\u015feklinde kullan\u0131mda bulunursak e\u011fer y\u00f6nlendirilecek link
\n“http:\/\/localhost:4200\/acomponent\/parametreDegeri\/deger2\/deger3\/.\/.\/.”<\/em>
\n\u015feklinde olacakt\u0131r.<\/p>\nQuery Params \u0130le Route Navigation<\/h3>\nT\u00fcm bunlar\u0131n d\u0131\u015f\u0131nda y\u00f6nlendirme i\u015flemi s\u0131ras\u0131nda olu\u015fturulacak adrese Query String benzeri olan Query Params de\u011ferleride verebiliriz.<\/p>\n\r\nthis.route.navigate(["acomponent", "parametreDegeri"], { queryParams: { queryParams1: "query1", queryParams2: "query2" } });\r\n<\/pre>\n\u0130kinci parametre i\u00e7erisinde “queryParams” ile verilen t\u00fcm de\u011ferler olu\u015fturulacak linke Query Params olarak eklenmektedir.
\n<\/a><\/p>\n
Bu Query Paramslar\u0131n de\u011ferini okuyabilmek i\u00e7in Angular 4 Routing\u2019de Parametre Tan\u0131mlama ve De\u011ferini Okuma<\/a> ba\u015fl\u0131kl\u0131 makalemde de\u011findi\u011fim y\u00f6ntemi uygulayaca\u011f\u0131z.<\/p>\n
\u00d6rne\u011fin;<\/p>\n
\r\n    this.activatedRoute.queryParams.subscribe(p => {\r\n      this.queryParams1 = p.queryParams1;\r\n      this.queryParams2 = p.queryParams2;\r\n    });\r\n<\/pre>\n\u015feklinde. Burada tek dikkatli olman\u0131z gereken husus, belirtilen adreste normal parametre de\u011ferleri \u00fczerinden \u00f6rneklendirme yap\u0131ld\u0131\u011f\u0131 i\u00e7in “params” de\u011ferleri \u00fczerinde bir subscribe uygulanm\u0131\u015ft\u0131r. Burada Query Paramslar mevzu bahis oldu\u011fundan dolay\u0131 “queryParams” de\u011ferleri elde edilmesi gerekmektedir. Bu noktaya dikkatinizi \u00e7ekerim…<\/p>\n
Query Params \u0130le RouterLink Olu\u015fturma<\/h3>\nE\u011fer ki olu\u015fturulacak link yap\u0131s\u0131n\u0131n Query Params de\u011ferleriyle olu\u015fturulmas\u0131n\u0131 istiyorsan\u0131z a\u015fa\u011f\u0131daki gibi bir \u00e7al\u0131\u015fma ger\u00e7ekle\u015ftirebilirsiniz.<\/p>\n
\r\n    <a [routerLink]="['\/acomponent\/parametreDegeri']" [queryParams]="{queryParams1: 'query1', queryParams2: 'query2'}" [routerLinkActiveOptions]="{exact:true}" routerLinkActive="active" class="list-group-item list-group-item-action active">ASayfas\u0131<\/a>\r\n<\/pre>\nBurada [routerLink] ile yolumuzu belirtiyoruz. [queryParams] i\u00e7erisinde ise bu linke t\u0131kland\u0131\u011f\u0131nda ta\u015f\u0131mak istedi\u011fimiz verileri Query Params de\u011ferlerine veriyoruz. Gerisi bildi\u011finiz link yap\u0131s\u0131nda kullan\u0131lan attributelard\u0131r.<\/p>\n
Evet… Angular ile Route Navigation \u00fczerine olduk\u00e7a geni\u015f kapsaml\u0131 bir i\u00e7erik olu\u015fturmu\u015f olduk.<\/p>\n
Faydalanman\u0131z dile\u011fiyle…<\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar dilerim…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, \u00d6nceki yaz\u0131lar\u0131mdan Angular 4 Routing Mekanizmas\u0131 ba\u015fl\u0131kl\u0131 makalemde Angular ile routing i\u015flemlerinin nas\u0131l ger\u00e7ekle\u015ftirildi\u011fini ele alm\u0131\u015ft\u0131k. Bu i\u00e7eri\u011fimizde ise Angular’da Routing Navigation ile bir componentten bir ba\u015fka componente y\u00f6nlendirilme i\u015flemini inceleyece\u011fiz. Diyelim ki;...<\/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":[2156,2146,2381,2383,2380,2384,2385,2382],"class_list":["post-8217","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-4","tag-angular","tag-angular-4","tag-angular-route-navigation","tag-navigation","tag-query-params","tag-query-params-route-navigation","tag-query-params-routerlink","tag-route-navigation"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8217","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=8217"}],"version-history":[{"count":14,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8217\/revisions"}],"predecessor-version":[{"id":8234,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8217\/revisions\/8234"}],"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=8217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=8217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=8217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}