{"id":35853,"date":"2025-12-04T18:40:43","date_gmt":"2025-12-04T15:40:43","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=35853"},"modified":"2025-12-04T18:40:43","modified_gmt":"2025-12-04T15:40:43","slug":"angular-router-ile-query-parametrelerini-kullanma-rehberi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/angular-router-ile-query-parametrelerini-kullanma-rehberi\/","title":{"rendered":"Angular Router ile Query Parametrelerini Kullanma Rehberi"},"content":{"rendered":"

<\/p>\n

Angular Router ile Query Parametrelerini Kullanma Rehberi<\/h2>\n

Angular uygulamalar\u0131nda y\u00f6nlendirme, kullan\u0131c\u0131 deneyiminin temel ta\u015flar\u0131ndan biridir. Uygulama i\u00e7inde farkl\u0131 g\u00f6r\u00fcn\u00fcmler aras\u0131nda ge\u00e7i\u015f yapmam\u0131z\u0131 sa\u011flayan Angular Router, sadece statik URL yollar\u0131n\u0131 de\u011fil, ayn\u0131 zamanda dinamik veri iletmek i\u00e7in de g\u00fc\u00e7l\u00fc mekanizmalar sunar. Bu mekanizmalardan biri de “query parametreleri”dir. Query parametreleri, bir URL’nin sonuna eklenen ve genellikle anahtar-de\u011fer \u00e7iftlerinden olu\u015fan veri par\u00e7ac\u0131klar\u0131d\u0131r. Kullan\u0131c\u0131lar\u0131n bir sayfadaki filtreleme, s\u0131ralama, sayfalama gibi etkile\u015fimlerini veya uygulaman\u0131n belirli bir durumunu URL \u00fczerinden payla\u015f\u0131labilir hale getirmek i\u00e7in vazge\u00e7ilmezdirler.<\/p>\n

Bu makalede, Angular Router ile query parametrelerinin ne oldu\u011funu, neden \u00f6nemli olduklar\u0131n\u0131, nas\u0131l okunup olu\u015fturulduklar\u0131n\u0131 ve y\u00f6netildiklerini ayr\u0131nt\u0131l\u0131 bir \u015fekilde inceleyece\u011fiz. Ayr\u0131ca, yayg\u0131n kullan\u0131m senaryolar\u0131n\u0131 ele alacak, kod \u00f6rnekleri sunacak ve en iyi pratikler hakk\u0131nda ipu\u00e7lar\u0131 verece\u011fiz.<\/p>\n

Query Parametreleri Nedir ve Neden Kullan\u0131l\u0131r?<\/h3>\n

Query parametreleri, bir URL’nin sorgu dizgesi (query string) b\u00f6l\u00fcm\u00fcnde yer alan ve genellikle ?<\/code> karakterinden sonra ba\u015flayan anahtar-de\u011fer \u00e7iftleridir. \u00d6rne\u011fin, https:\/\/example.com\/urunler?kategori=elektronik&sirala=fiyat-artana<\/code> URL’sinde kategori=elektronik<\/code> ve sirala=fiyat-artana<\/code> birer query parametresidir.<\/p>\n

Path parametrelerinden (\u00f6rn: urunler\/:id<\/code>) farkl\u0131 olarak, query parametreleri bir kayna\u011f\u0131n belirli bir \u00f6rne\u011fini tan\u0131mlamak yerine, genellikle o kayna\u011f\u0131n bir alt k\u00fcmesini veya g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc de\u011fi\u015ftirmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n

Query Parametrelerinin Kullan\u0131m Alanlar\u0131:<\/h4>\n

* Filtreleme:<\/strong> Bir \u00fcr\u00fcn listesini kategoriye, fiyata veya markaya g\u00f6re filtrelemek. (\u00f6rn: urunler?kategori=kitap<\/code>)
\n* S\u0131ralama:<\/strong> Arama sonu\u00e7lar\u0131n\u0131 fiyata, tarihe veya pop\u00fclerli\u011fe g\u00f6re s\u0131ralamak. (\u00f6rn: urunler?sirala=fiyat-azalana<\/code>)
\n* Sayfalama (Pagination):<\/strong> B\u00fcy\u00fck veri k\u00fcmelerini sayfalara ay\u0131rmak ve belirli bir sayfaya gitmek. (\u00f6rn: urunler?sayfa=2&limit=10<\/code>)
\n* Arama:<\/strong> Kullan\u0131c\u0131n\u0131n girdi\u011fi arama terimini URL’de ta\u015f\u0131mak. (\u00f6rn: urunler?arama=laptop<\/code>)
\n* Durum Payla\u015f\u0131m\u0131:<\/strong> Bir uygulaman\u0131n belirli bir durumunu (\u00f6rn: a\u00e7\u0131k bir modal, se\u00e7ili bir sekme) URL \u00fczerinden payla\u015f\u0131labilir hale getirmek.
\n* Analiz ve Takip:<\/strong> Pazarlama kampanyalar\u0131n\u0131 veya kullan\u0131c\u0131 davran\u0131\u015flar\u0131n\u0131 takip etmek i\u00e7in UTM parametreleri gibi \u00f6zel parametreler kullanmak.<\/p>\n

Query parametreleri, bir uygulaman\u0131n durumunu URL’ye yans\u0131tarak, kullan\u0131c\u0131lar\u0131n taray\u0131c\u0131lar\u0131n\u0131n geri\/ileri d\u00fc\u011fmelerini kullanmalar\u0131na olanak tan\u0131r, belirli bir durumu kolayca payla\u015fmalar\u0131n\u0131 sa\u011flar ve sayfa yenilemelerinde durumun kaybolmas\u0131n\u0131 engeller.<\/p>\n

Angular Router ile Query Parametrelerini Okuma<\/h3>\n

Angular uygulamalar\u0131nda, aktif rotan\u0131n query parametrelerine eri\u015fmek i\u00e7in ActivatedRoute<\/code> servisini kullan\u0131r\u0131z. Bu servis, mevcut rotan\u0131n URL’sini, parametrelerini ve di\u011fer verilerini i\u00e7eren bir dizi g\u00f6zlemlenebilir (Observable) ve anl\u0131k g\u00f6r\u00fcnt\u00fc (snapshot) \u00f6zelli\u011fi sunar.<\/p>\n

ActivatedRoute Servisi ve Query Parametreleri<\/h4>\n

ActivatedRoute<\/code> servisini bir bile\u015fenin constructor’\u0131na enjekte ederek kullanmaya ba\u015flayabiliriz:<\/p>\n

import { Component, OnInit } from '@angular\/core';\nimport { ActivatedRoute } from '@angular\/router';\n\n@Component({\n  selector: 'app-product-list',\n  templateUrl: '.\/product-list.component.html',\n  styleUrls: ['.\/product-list.component.css']\n})\nexport class ProductListComponent implements OnInit {\n  category: string | null = null;\n  sortBy: string | null = null;\n\n  constructor(private route: ActivatedRoute) { }\n\n  ngOnInit(): void {\n    \/\/ Query parametrelerini okuma\n  }\n}<\/code><\/pre>\n
Query parametrelerini okuman\u0131n iki ana yolu vard\u0131r: snapshot<\/code> ve queryParams<\/code> Observable’\u0131.<\/p>\n
Snapshot ile Query Parametrelerini Okuma<\/h4>\n
ActivatedRoute.snapshot.queryParams<\/code> \u00f6zelli\u011fi, bile\u015fen y\u00fcklendi\u011finde mevcut query parametrelerinin anl\u0131k bir g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc sa\u011flar. Bu y\u00f6ntem, parametrelerin bile\u015fen y\u00fcklendikten sonra de\u011fi\u015fmeyece\u011fi durumlarda veya sadece ba\u015flang\u0131\u00e7 de\u011ferlerini almak istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
\/\/ ... ProductListComponent i\u00e7inde\n\nngOnInit(): void {\n  this.category = this.route.snapshot.queryParams['kategori'];\n  this.sortBy = this.route.snapshot.queryParams['sirala'];\n\n  console.log('Kategori (Snapshot):', this.category);\n  console.log('S\u0131ralama (Snapshot):', this.sortBy);\n}<\/code><\/pre>\n
Dikkat:<\/strong> E\u011fer ayn\u0131 bile\u015fen i\u00e7inde (\u00f6rne\u011fin, bir \u00fcr\u00fcn listesi sayfas\u0131nda farkl\u0131 filtreler se\u00e7ildi\u011finde) query parametreleri de\u011fi\u015firse, snapshot<\/code> yeni de\u011ferleri yans\u0131tmayacakt\u0131r. Bu gibi dinamik senaryolar i\u00e7in queryParams<\/code> Observable’\u0131n\u0131 kullanmak gerekir.<\/p>\n
queryParams Observable ile Query Parametrelerini Okuma<\/h4>\n
ActivatedRoute.queryParams<\/code> bir Observable’d\u0131r ve query parametrelerinde herhangi bir de\u011fi\u015fiklik oldu\u011funda yeni de\u011ferleri yayar. Bu, ayn\u0131 bile\u015fen i\u00e7inde kal\u0131rken URL’deki query parametrelerinin de\u011fi\u015fti\u011fi senaryolar i\u00e7in idealdir. \u00d6rne\u011fin, bir arama sayfas\u0131nda farkl\u0131 aramalar yap\u0131ld\u0131\u011f\u0131nda veya filtreler de\u011fi\u015ftirildi\u011finde bile\u015fenin g\u00fcncel kalmas\u0131n\u0131 sa\u011flar.<\/p>\n
import { Component, OnInit, OnDestroy } from '@angular\/core';\nimport { ActivatedRoute } from '@angular\/router';\nimport { Subscription } from 'rxjs';\n\n@Component({\n  selector: 'app-product-list',\n  templateUrl: '.\/product-list.component.html',\n  styleUrls: ['.\/product-list.component.css']\n})\nexport class ProductListComponent implements OnInit, OnDestroy {\n  category: string | null = null;\n  sortBy: string | null = null;\n  private queryParamsSubscription: Subscription | undefined;\n\n  constructor(private route: ActivatedRoute) { }\n\n  ngOnInit(): void {\n    this.queryParamsSubscription = this.route.queryParams.subscribe(params => {\n      this.category = params['kategori'] || 't\u00fcm\u00fc'; \/\/ Varsay\u0131lan de\u011fer atama\n      this.sortBy = params['sirala'] || 'varsay\u0131lan'; \/\/ Varsay\u0131lan de\u011fer atama\n      console.log('Kategori (Observable):', this.category);\n      console.log('S\u0131ralama (Observable):', this.sortBy);\n      \/\/ Parametreler de\u011fi\u015fti\u011finde verileri yeniden y\u00fckleme veya filtreleme i\u015flemleri burada yap\u0131labilir.\n      this.loadProducts();\n    });\n  }\n\n  loadProducts(): void {\n    console.log(\u00dcr\u00fcnler y\u00fckleniyor: Kategori=${this.category}, S\u0131ralama=${this.sortBy}<\/code>);\n    \/\/ API \u00e7a\u011fr\u0131s\u0131 veya filtreleme mant\u0131\u011f\u0131 burada yer alacakt\u0131r.\n  }\n\n  ngOnDestroy(): void {\n    \/\/ Bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in aboneli\u011fi iptal etmeyi unutmay\u0131n.\n    if (this.queryParamsSubscription) {\n      this.queryParamsSubscription.unsubscribe();\n    }\n  }\n}<\/code><\/pre>\n
Bu \u00f6rnekte, ngOnInit<\/code> i\u00e7inde queryParams<\/code> Observable’\u0131na abone oluyoruz. Her parametre de\u011fi\u015fikli\u011finde aboneli\u011fin i\u00e7indeki kod \u00e7al\u0131\u015facak ve bile\u015fenimizin durumu g\u00fcncellenecektir. ngOnDestroy<\/code> ya\u015fam d\u00f6ng\u00fcs\u00fc kancas\u0131nda aboneli\u011fi iptal etmek, bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n
Angular Router ile Query Parametrelerini Y\u00f6nlendirme<\/h3>\n
Query parametrelerini okumak kadar, onlar\u0131 olu\u015fturup URL’ye eklemek de \u00f6nemlidir. Angular Router, bu i\u015flemi hem deklaratif (template i\u00e7inde routerLink<\/code> ile) hem de programatik (TypeScript kodunda Router<\/code> servisi ile) olarak kolayla\u015ft\u0131r\u0131r.<\/p>\n
routerLink Direktifi ile Query Parametreleri Ekleme<\/h4>\n
routerLink<\/code> direktifi, HTML \u015fablonlar\u0131nda navigasyon ba\u011flant\u0131lar\u0131 olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. Query parametrelerini eklemek i\u00e7in [queryParams]<\/code> input’unu kullan\u0131r\u0131z. Bu input, anahtar-de\u011fer \u00e7iftlerini i\u00e7eren bir JavaScript nesnesi al\u0131r.<\/p>\n
\n
\n  
\u00dcr\u00fcn Kategorileri<\/h3>\n