Angular 4 Routing’de Parametre Tanımlama ve Değerini Okuma

Merhaba,

Bir önceki Angular 4 Routing Mekanizması başlıklı makalemde Angular’da Routing mekanizmasını incelemiştik. Bu içeriğimizde ise oluşturduğumuz route’larda nasıl parametre tanımlayacağımızı ve bu tanımladığımız parametreleri nasıl okuyacağımızı inceleyeceğiz.

Angular’da routes şablonlarını oluştururken biryandan da istediğiniz route’a aşağıdaki gibi parametre tanımlayabilirsiniz.

export const AppRoutes: Routes = [
    { path: "page/:content", component: PageComponent }
];

Dikkat ederseniz “path” değerinde beklenen ana adresin yanına “/:” karakterleri eşliğinde parametre tanımlayabilmekteyiz. Bahsedilen şekilde yukarıda “content” isimli bir parametre tanımlanmıştır.

Şimdi gelin bu parametreyi kullanalım;

<div class="row">
  <div class="list-group">
    <a routerLink="page/a" [routerLinkActiveOptions]="{exact:true}" routerLinkActive="active" class="list-group-item list-group-item-action">ASayfası</a>
    <a routerLink="page/b" [routerLinkActiveOptions]="{exact:true}" routerLinkActive="active" class="list-group-item list-group-item-action">BSayfası</a>
    <a routerLink="page/c" [routerLinkActiveOptions]="{exact:true}" routerLinkActive="active" class="list-group-item list-group-item-action">CSayfası</a>
  </div>
  <div>
    <router-outlet></router-outlet>
  </div>
</div>

Dikkat!!!
Routing yapılanmasına dair tüm teferruatların Angular 4 Routing Mekanizması isimli makalede olduğu gibi uygulandığını varsayarak konumuza devam ediyoruz.

Yukarıdaki kod bloğunu incelerseniz eğer “routerLink” özelliğine tanımlanan adreslerde “content” parametresine verilen değerler aşikardır. Bu adreslere tıklandığında;
Angular 4 Routing’de Parametre Tanımlama ve Değerini Okuma
gördüğünüz gibi linkler tetiklenmektedir. Tetiklenme sonucunda uygulama parametre olarak hangi değerin verildiğini doğal olarak bilemeyecek, bilsede(ki şu durumda mümkün değil) bu parametrelere karşılık ne tür bir işlem uygulayacağını bilemeyecektir.

O halde bizim ilk olarak “PageComponent” isimli component üzerinde parametreye verilen değerleri elde etmemiz gerekmektedir. Bu işlemide “@angular/router” dizininde bulunan “ActivatedRoute” isimli servis sayesinde gerçekleştirmekteyiz.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from "@angular/router";
@Component({
  selector: 'app-page',
  templateUrl: './page.component.html',
  styleUrls: ['./page.component.css']
})
export class PageComponent implements OnInit {
  contentParam: string;
  constructor(private activatedRoute: ActivatedRoute) { }
  ngOnInit() {
    this.activatedRoute.params.subscribe(p => {
      this.contentParam = p["content"];
    });
  }
}

Yukarıdaki kod bloğunu incelerseniz eğer; route parametreleri “ActivatedRoute” servisi sayesinde okunabilmektedir. Tabi burada dikkat ederseniz eğer “ActivatedRoute” asenkron bir şekilde çalışmaktadır ve bizim route parametrelerini okuyabilmemiz için mutlaka subscribe(abone) olmamız gerekmektedir. Ancak bu şekilde bir parametreye değer verildiğinde yakalayabilmekteyiz.

Son olarak “page.component.html” sayfasını aşağıdaki gibi düzenleyelim;

<p>
  {{contentParam}}
</p>

ve bu işlemden sonra çalışmamızı kaydedip, yayınladığımızda aşağıdaki gibi route’a verilen parametreye ulaşılıp, ekrana yazdırıldığını görebiliriz.
Angular 4 Routing’de Parametre Tanımlama ve Değerini Okuma

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Copy Protected by Chetan's WP-Copyprotect.