Angular Academy · Ders

Rota Parametreleri ve Sorgu Parametreleri

Rota parametrelerini okuyup bunlara tepki verme

Rota Parametreleri ve Sorgu Parametreleri, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

Yol parametreleri ve sorgu parametreleri

Yol parametreleri, yolun bir parçasıdır (/user/42). Sorgu parametreleri, ? işaretinden sonra eklenir (/search?q=ng&page=2). Yönlendirici, her ikisine de reaktif erişim sağlar.

Yol parametresi tanımlama

Bir parametre bildirmek için yolda iki nokta kullanın.

export const routes = [
  { path: 'user/:id', component: UserComponent }
];

paramMap ile parametreleri okuma

ActivatedRoute.paramMap, yol parametreleri her değiştiğinde yayın yapan bir gözlemlenebilirdir. Bir değeri okumak için .get() kullanın.

import { inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

const route = inject(ActivatedRoute);
route.paramMap.subscribe(params => {
  const id = params.get('id');
  console.log('user id', id);
});

Parametreleri neden gözlemlemelisiniz

/user/1 yolundan /user/2 yoluna geçerken bileşen yeniden kullanılabilir. Yapıcı bir kez çalışır, ancak paramMap yeniden yayın yapar; bu nedenle değişikliğe tepki vermek için abone olun.

Tek seferlik okumalar için anlık görüntü

Bileşen farklı bir parametre için hiç yeniden kullanılmıyorsa anlık görüntüyü eşzamanlı olarak okuyabilirsiniz.

const id = route.snapshot.paramMap.get('id');
// only valid if the route param will not change
// while this component instance is alive

queryParamMap ile sorgu parametreleri

queryParamMap, sorgu dizesi değerlerini yine bir gözlemlenebilir olarak sunar.

route.queryParamMap.subscribe(qp => {
  const page = Number(qp.get('page') ?? '1');
  const q = qp.get('q') ?? '';
  console.log(q, page);
});

Sorgu parametreleriyle gezinme

router.navigate içindeki queryParams seçeneğini veya routerLink yönergesini kullanın.

import { Router } from '@angular/router';
const router = inject(Router);

router.navigate(['/search'], {
  queryParams: { q: 'angular', page: 2 }
});

Sorgu parametrelerini koruma

queryParamsHandling: 'merge', bazılarını güncellerken mevcut parametreleri korur; 'preserve' ise bunları gezinmeler arasında taşır.

router.navigate(['/search'], {
  queryParams: { page: 3 },
  queryParamsHandling: 'merge'
});

Bileşen girişlerinin bağlanması (modern yöntem)

withComponentInputBinding() ile yol ve sorgu parametreleri, ActivatedRoute'u atlayarak doğrudan bileşenin @Input() girişlerine (veya giriş sinyallerine) bağlanabilir.

// in provideRouter(routes, withComponentInputBinding())

export class UserComponent {
  @Input() id!: string; // bound from /user/:id
}

Tekrarlanan parametreler için getAll

Bir sorgu anahtarı birden çok kez görünebiliyorsa getAll() kullanın; örneğin ?tag=a&tag=b.

route.queryParamMap.subscribe(qp => {
  const tags = qp.getAll('tag'); // ['a', 'b']
  console.log(tags);
});

Parametreleri veri yüklemeyle birleştirme

Yaygın bir kalıp şudur: kimlik değiştiğinde yeniden getirme yapılması için parametreyi switchMap ile bir HTTP çağrısına dönüştürün.

route.paramMap.pipe(
  switchMap(p => this.http.get('/api/user/' + p.get('id')))
).subscribe(user => console.log(user));

Kısa Kontrol

Yol parametrelerini ne kadar anladığınızı test edin.

Özet: Yol ve Sorgu Parametreleri

Yönlendirici, parametreleri reaktif olarak sunar.

paramMap: Yol parametreleri; yeniden kullanım için gözlemleyin.
queryParamMap: Sorgu dizesi; tekrarlar için getAll kullanın.
snapshot: Tek seferlik okumalar için.
withComponentInputBinding(): Parametreleri girişlere bağlar.

Sırada: çözümleyiciler ve yol verileri.

Sıkça Sorulan Sorular

“Rota Parametreleri ve Sorgu Parametreleri” dersi ücretsiz mi?

Evet — “Rota Parametreleri ve Sorgu Parametreleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“Rota Parametreleri ve Sorgu Parametreleri” dersinde ne öğreneceğim?

Rota parametrelerini okuyup bunlara tepki verme Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Rota Parametreleri ve Sorgu Parametreleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Rota Parametreleri ve Sorgu Parametreleri
Çözümleyiciler ve Rota Verileri
İşlevsel Rota Korumaları
Yönlendirici Olayları ve Gezinme

← Angular Academy Sayfasına Dön