Giriş
Uygulamalar oluştururken, rotanın davranışını tanımlamak için bazı argümanlar veya parametreler geçirmek istediğimiz senaryolar olabilir. Angular içinde bunlara sorgu parametreleri denir ve bunlar isteğe bağlıdır. Sorgu parametreleri, yalnızca tek bir rotaya bağlı olan ve zorunlu olan normal rota parametreleri ile karıştırılmamalıdır.
Rota parametreleri ile sorgu parametreleri arasındaki farkı netleştirmek için, ürünleri depolayan bir uygulama oluşturduğunuzu hayal edin. product_id kullanarak belirli bir ürünü açan bir rotanız olabilir. Ayrıca bir sorgu parametresi de belirtebilirsiniz: read_only. read_only değeri şu şekilde ayarlandığında: true, kullanıcı kaydı yalnızca görüntüleyebilir; oysa read_only değeri şu olduğunda: false, kullanıcı kaydı düzenleyebilir de. Bu sayede sadece tek bir rota kullanarak hem düzenleme hem de görüntüleme kullanım senaryoları ele alınabilir. Burada product_id bir rota parametresidir ve isteğe bağlı olan read_only ise bir sorgu parametresidir.
Gereksinimler
Bu makaleyi tam olarak anlamak için Angular kullanarak uygulama geliştirme konusunda aşinalık gereklidir. Angular Router, RouterLink ve ActivatedRoute ile deneyim sahibi olmak da faydalı olacaktır.
Router.navigate ile Sorgu Parametreleri Geçirme
Eğer rotalar arasında gezinmek için Router.navigate kullanıyorsanız, sorgu parametrelerini göndermek için queryParams kullanın.
Yukarıdaki örnekte, ziyaretçilerin popülerliğe göre sıralanmış ürün listesini görmesini istiyorsak aşağıdaki kodu kullanırız:
|
1 2 3 4 5 6 |
navigateToProducts() { this.router.navigate( ['/products'], { queryParams: { order: 'popular' } } ); } |
Bu kodu kullanarak URL şu şekilde olacaktır:
|
1 |
http://localhost:4200/products?order=popular |
Ancak, gezinirken birden fazla parametre geçirmemiz gereken senaryolar olabilir. Örneğin, ürünleri hem popülerliğe hem de fiyata göre sıralamak istiyorsak aşağıdaki kodu kullanabiliriz:
|
1 2 3 4 5 6 |
navigateToProducts() { this.router.navigate( ['/products'], { queryParams: { order: 'popular', price: 'high-to-low' } } ); } |
Bu kez URL şu şekilde olacaktır:
|
1 |
http://localhost:4200/products?order=popular&price=high-to-low |
Bu, kullanarak sorgu parametrelerinin nasıl ayarlanacağını özetler.queryParams.
queryParamsHandling Kullanarak Sorgu Parametrelerinin Kaybolmasını Önleme
Rotalar arasında gezinirken parametreler kaybolma eğilimindedir. Diyelim ki bir arg0 argümanı geçtik, sonraki yönlendirmeler gerçekleştiğinde bu argüman aktarılmayacaktır. Parametreleri queryParamsHandling kullanarak ve değeri şu şekilde ayarlayarak koruyabiliriz: preserve veya merge.
Yukarıdaki örnekte, rota parametrelerini korurken ziyaretçileri brands sayfasına, product sayfasından { order: 'popular' } rota parametresiyle yönlendirmek istediğimizi varsayalım. Bunu yapmak için queryParamsHandling kullanabilir ve bunu şu şekilde ayarlayabiliriz: preserve :
|
1 2 3 4 5 6 |
navigateToBrand() { this.router.navigate( ['/brand'], { queryParamsHandling: 'preserve' } ); } |
Bu, URL'nin şu şekilde görünmesini sağlayacaktır:
|
1 |
http://localhost:4200/users?brand=popular |
Ardından, önceki rotanın sorgu parametresi olan { order: 'popular' } değerini korurken, yeni parametreler olan { price: 'high-to-low' } değerlerini eklemek istediğimizi varsayalım. Bunun için queryParamsHandling değerini şu şekilde ayarlayabiliriz: merge:
|
1 2 3 4 5 6 7 8 |
navigateToBrand() { this.router.navigate( ['/brand'], { queryParams: { price: 'high-to-low' }, queryParamsHandling: 'merge' } ); } |
Yukarıdaki kodla birlikte URL şu hale gelecektir:
|
1 |
http://localhost:4200/brand?order=popular&price=high-to-low |
Burada, korumak veya birleştirmek için queryParamsHandling kullanılarak sorgu parametrelerinin korunması konusunu tamamlıyoruz.
RouterLink ile Sorgu Parametrelerini Geçirme
Önceki bağlantımızı göz önünde bulundurarak, gezinmek için RouterLink yönergesini kullanmak istersek, sorgu parametrelerini aşağıdaki gibi queryParams kullanarak geçirmemiz gerekecektir:
|
1 2 3 |
<a [routerLink]="['/products']" [queryParams]="{ order: 'popular' }"> Ürünler </a> |
Nesneyi tek yönlü bağlama kullanarak queryParams içine nasıl geçirdiğimize dikkat edin. Ayrıca, queryParams .
olarak tüm bir nesneyi de geçirebiliriz. Dahası, bu sorgu parametrelerini sonraki gezinmelerde de taşımak istersek, queryParamsHandling seçeneğini kullanabiliriz. queryParamsHandling için olası seçenekler merge ve preserve:
|
1 2 |
<a [routerLink]="['/products']" [queryParams]="{ filter: 'new', order: 'popular' }" queryParamsHandling="merge">Ürünler</a> |
Burada, queryParams parametresinin geçirilmesini ve queryParamsHandling kullanımını RouterLink üzerinde gördük..
Sorgu Parametreleri Değerlerini Okuma
Şimdiye kadar sorgu parametrelerini rotada nasıl geçireceğimizi öğrendik. Bu parametreler isteğe bağlıydı ve hedef sayfaya bazı bilgileri iletmek için kullanılıyordu. Parametreleri göndermek işin bir parçasıdır, ancak parametreleri URL'den okumak ve kullanmak da gereklidir.
Angular'da, rota sorgu parametrelerini ActivatedRoute sınıfını kullanarak okuruz. ActivatedRoute sınıfı, geçerli URL'nin parametrelerini göstermek için queryParams adında gözlemlenebilir bir özelliğe sahiptir.
Aşağıdaki URL ile çalıştığımızı varsayalım:
|
1 |
http://localhost:4200/products?order=popular |
Kod içinde order sorgu parametresine erişmek için aşağıdaki kodu kullanırız:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { ActivatedRoute } from '@angular/router'; import 'rxjs/add/operator/filter'; @Component({ ... }) export class SampleComponent implements OnInit { order: string; constructor(private route: ActivatedRoute) { } ngOnInit() { this.route.queryParams .filter(params => params.order) .subscribe(params => { console.log(params); // { order: "popular" } this.order = params.order; }); } } |
Burada konsolda, order sorgu parametresinin değerini “popular olarak göreceğiz.” yazdırılır. Birden fazla sorgu parametremiz varsa, queryParamMap özelliğini kullanabiliriz; bu özellik bir observable paramsMap nesnesi döndürür.
Eğer aşağıdaki gibi birden fazla sorgu parametresine sahip bir URL'miz varsa:
|
1 |
http://localhost:4200/products?order=popular&price=high-to-low |
Aşağıdaki kodu kullanarak bu sorgu parametrelerine erişebiliriz:
|
1 2 3 4 5 |
this.route.queryParamMap .subscribe((params) => { this.queryObj = { ...params.keys, ...params }; } ); |
Burada nesne yayma operatörünü (object spread operator) kullanarak aşağıdaki sonucu elde ederiz:
|
1 2 3 4 5 6 7 8 |
{ "0": "order", "1": "filter", "params": { "order": "popular", "price": "high-to-low" } } |
Son olarak, elde edilen rotalardan sorgu parametrelerine nasıl erişeceğinizi anlayabilmeniz gerekir.
Sonuç
Bu eğitimde, sorgu parametreleri ile rota parametreleri arasındaki farka baktık. Ayrıca argümanları rotalar arasında sorgu parametreleri olarak nasıl aktaracağımızı ve sayfada queryParams ve queryParamsHandling ile birlikte Router.navigate ve RouterLink kullanarak nasıl geri alacağımızı inceledik. Ayrıca queryParams ve queryParamMap parametrelerini ActivatedRoute.
Angular, temelinde Javascript gerektirir. Javascript hakkındaki bilginizi daha da ilerletmek istiyorsanız aşağıdaki bloglara göz atabilirsiniz:
- JavaScript ile Çalışmak: Sınıflar Nasıl Çalışır
- JavaScript ile Çalışmak: Prototipler ve Kalıtımlar Nasıl Çalışır
- JavaScript: Dizeleri Dizinleme, Bölme ve Değiştirme Üzerine Bir Eğitim
Keyifli Kodlamalar!
Yorumlar
Henüz yorum yapılmamış. İlk siz olun.