Angular Router Navigate [Programatik]

Angular Router linklemeyi statik olarak template kısmında yapmayı https://gelistir.net/495/angular-router-linkleme-statik/ adresinde anlatmıştım. Lakin çoğu zaman, linkleme ve sayfa yönlendirme(navigate) işlemlerini bileşenlerin içerisinde TypeScript kodu ile yapmanız gerekecektir.

İhtiyaç senaryosu;

Neden programatik şekilde TypeScript kodu ile linkleme yapmaya gerek var ? sorusunun gerçek hayattaki uygulamalardan verilebilecek en basit örneği: E-ticaret uygulamanızda, kullanıcı ürün sayfasında "Hemen Satın Al" butonuna basıp ürünü sepete ekler, ürün component’ in de ilgili işlemler yapılır ve başarılı bir sepete ekleme gerçekleştiğinde, anında sepet sayfasına yönlendirmek gerekir. İşte bunu, programatik şekilde, component içerisinde yapabilirsiniz.

Programatik Linkleme

• Bileşen içerisinde linkleme yapabilmek için, öncelikle ilgili bileşende Router Module’ ü import edip, constructor içerisinde, bir özniteliğe atamamız gerekiyor;

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

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

  constructor(private router: Router) { }

}

• addToBasket adında bir metod oluşturup içerisinde router’ ı kullanarak yönlendirme yapıyorum;

  addToBasket() {
  this.router.navigate(['/basket']);
  }

• addToBasket metodu tetiklenince, router’ ın navigate metodu içerisindeki dizide verdiğim path olan basket path’ ine gidicek. Aşağıda basket path’ i içinde route ekliycem ve ilgili component’ i oluşturucam, lakin addToBasket metodunu tetikleyen butonu, HomeComponent’ in template’ ine eklemeyi unutmayalım;

<button class="btn btn-primary" (click)="addToBasket()">Hemen Satın Al</button>

• BasketComponent’ i oluşturuyorum ve şimdilik sadece template’ ine sepete hoşgeldiniz yazıyorum;

ng g c basket

• basket path’ i AppModule içerisindeki routes dizisine ekledim;

const appRoutes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'about', component: AboutComponent},
  {path: 'basket', component: BasketComponent}
];

Relative Link Oluşturmak

Relative yani bağıntılı link oluşturmanız gerekebilir. Yani başka bir path’ e eklenen path şeklinde. Örneğin, "basket" path’ i ile relative olarak "basket/payment" linkini programatik olarak oluşturmak için "ActivatedRoute" kütüphanesini de bileşene eklemeniz gerekiyor;

constructor(private router: Router, private route: ActivatedRoute) { }

• payment adında bir metod oluşturup, içerisinde router navigate metodunu kullanarak, payment path’ ini yazıyoruz ve ikinci parametre olarak da, obje içerisinde, relativeTo parametresine this.route değerini veriyoruz;

payment() {
    this.router.navigate(['payment'], {relativeTo: this.route});
  }

• Bu sayede "payment" path’ i ilgili component’ in path’ ine relative olarak oluşturuluyor ve örneğimizde oluşan path "basket/payment" oluyor.

CANLI ÖRNEK;