Angular Route Query Parameter(?) ve Fragment(#) Erişmek

Tanımladığınız route’ larda query parameter yada fragment’ larınız olabilir. Query parameter, "?" işaretinden sonraki değerlerdir. Fragment ise (#) işaretinden sonraki değerlerdir.

Bu başlık altında inceleyeceğimiz 2 konu var.
Query parameters angular route link’ e nasıl eklenir ? Ve bu parametrelere nasıl erişilir ?

Uygulama Senaryosu;

Anasayfada listelenen ürünlerin linklerine, "?addToBasket=true" query parameter ve değerini ekliycez. Ürün sayfasına tıkladığında, bu parametre dolu ise, buna istinaden herhangi bir aksiyon alınabilir.

Query parameters ve fragment angular route link’ e nasıl eklenir ?

Query parameters, element’ e property olarak eklenir ve değer olarak javascript objesi alır;

[queryParams]= "{parameter:value}">

Template tarafında linkleme;

<li *ngFor="let product of products" >
        <a [routerLink]="['/product', product.id]"
        [queryParams]= "{addToBasket:true}">
            <h3>{{product.name}}</h3>
        </a>    
    </li>

• routerLink özelliğinin yanına, queryParams özelliğini ekleyip, içerisindeki obje’ ye addToBasket parametresi ekleyip değerini true verdik.

• Artık linklerin sonuna "?addToBasket=true" ekleniyor.

• Bir linkte teknik olarak sadece 1 fragment olabileceği için, fragment özelliği sadece bir değer alır;

[fragment]=" 'değer' "

• Çift tırnak içinde, tek tırnak işaretlerinin arasında yazdığımıza dikkat edin.Çünkü ilgili değeri elle yazıyoruz ve string olarak kabul edilmesini istiyoruz. Eğerki değişken kullansaydık, tek tırnak eklememize gerek yoktu.

<li *ngFor="let product of products" >
        <a [routerLink]="['/product', product.id]"
        [queryParams]= "{addToBasket:true}"
        [fragment]=" 'content' "
        >
            <h3>{{product.name}}</h3>
        </a>    
    </li>

TypeScript tarafında linkleme;

• Query parameter lı link oluşturmayı typescript kodu içerisinde de yapmaya ihtiyaç duyabiliriz.
  Yapmanız gereken şey, daha önce kullandığımız route.nagivate metoduna ikinci değer olarak queryParameters objesini ve içerisinde de değerlerini vermek;

this.router.navigate(['/product', 0], {queryParams: {addToBasket: true}} );

Query parameters ve fragment değerlerine nasıl ulaşılır ?

• Route üzerindeki değerlere ulaşmak istiyorsak her zaman "activatedRoute" kütüphanesine ihtiyacımız var. activatedRoute kütüphanesini constructor’ da eklemeyi unutmayın !
  QueryParameters olarak eklediğiniz her parametre, "activatedRoute.snapshot.queryParams" objesinin içerisinde bir öznitelik olarak bulunmaktadır.

constructor(private route: ActivatedRoute) { }

  ngOnInit() {

      if(this.route.snapshot.queryParams.addToBasket) {
      //sepete ekleme işlemleri
      this.addBasketDegeri = this.route.snapshot.queryParams.addToBasket;
    }

  }

• if bloğu içerisinde "this.route.snapshot.queryParams" objesinden sonra ilgili parametreyi yazarak, ilgili parametre route’ da var ise kontrolü yapıp, ardından herhangi bir değişkene değerini atayabilirsiniz.

• Aynı şekilde fragment içinde, "this.route.snapshot.fragment" özelliğinden değerine ulaşabilirsiniz.

CANLI ÖRNEK;