Angular Route Parametrelerine Erişmek

Angular router tanımlamayı, linklemeyi ve yönlendirmeyi https://gelistir.net/tag/router/ etiketi altındaki konularda anlatmıştım. Altyapımız oluştuğuna göre artık gerçek hayatta en sık kullanacağımız parametreli route oluşturma ve parametrelere erişme konusuna geçebiliriz.

Uygulama senaryosu;

• 2 adet component’ imiz var.
• HomeComponent; dizi içerisinde tanımladığımız ürünleri, her ürünün kendi id’ si ile linkleyerek listeleyecek.
• ProductComponent; route’ da belirtilen id’ ye sahip ürünün bilgilerini listeleyecek.

Route yapısı;

• Parametre alacak route’ a ilgili parametreyi "/" ile ayırdıktan sonra ":" ifadesini takip edecek şekilde, parametre ismini yazarak belirtmiş oluyoruz.

const appRoutes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'product/:id', component: ProductComponent}
];

• Product route’ unu, / ile yeni path part’ ına geçip, ":" ifadesini takip edecek şekilde parametre ismi vererek açmış olduk.

Parametreli Route Oluşturma

• HomeComponent’ te listeleyeceğimiz ürünleri barındıran products dizisini oluşturuyoruz.

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {

  products = [
    {
      id: 0,
      name : 'telefon'
    },
    {
      id: 1,
      name : 'tablet'
    }
  ];

}

• Ürünleri ngFor ile tek tek listeliyoruz.
• Elementlerin routerLink directive’ inin barındırdığı diziye, önce route ismini ardından ise, route parametresinin alacağı değeri belirleyen değişkeni yazıyoruz;

<ul>

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

</ul>

• Parametreli route link oluştururken, routerLink directive’ in aldığı diziye önce route ismi, ardından route’ daki parametrenin alacağı değeri belirleyen değişken ismi yazılır.

Route Parametrelerine Erişme;

• ProductComponent’ in route’ u "/product/123" gibi değerler alabilir. ProductComponent’ te öncelikle ihtiyacımız olan değişkenleri tanımlıyoruz. Şimdilik verileri herhangi bir api’ den almadığımız için örnek olması açısından bu şekilde ilerliyoruz.

• Route bilgisine erişmek için, constructor‘ da ActivatedRoute objesini route özniteliğine bağlıyoruz.

• ngOnInit anında, ActivatedRoute objesini bağladığımız route objemiz üzerinden "snapshot.params" objelerine erişip, route’ dan almak istediğimiz parametreyi veriyoruz ve bu sayede ilgili parametreye erişmiş oluyoruz.

• Elde ettiğimiz id değeri ile, products dizisinden istediğimiz ürün bilgisini elde edip, product objesine set ediyoruz.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  id: number;
  product: object;

  products = [
    {
      id: 0,
      name : 'telefon'
    },
    {
      id: 1,
      name : 'tablet'
    }
  ];

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {

    this.id = this.route.snapshot.params['id'];

    this.product = this.products[this.id];

  }

}

CANLI ÖRNEK;