Angular'da Rota Parametre Değerlerini Bileşende Alma

Rotalarda tanımladığımız parametrelerin değerleri, bileşen sınıfında alınabilir. Bunun nasıl yapılabileceğine bir göz atalım. Aşağıdaki gibi parametreleri olan bir rotamız olsun:

app/app.routes.tsconst routes: Routes = [
  { path: 'aaaa/:id', component: AaaaComponent },
  { path: 'bbbb', component: BbbbComponent },
];

Bu parametrenin değerini bileşen sınıfında alalım. Burada dikkat edilmesi gereken nokta, rota parametre değerlerinin sadece rotaya bağlı olan bileşende alınabileceğidir. Bizim durumumuzda rotaya Aaaa bileşeni bağlı. Bu nedenle bundan sonra onunla çalışacağız.

Yani, rota parametre değerlerini almak için ActivatedRoute servisini kullanmak gerekir. Onu bileşenimize içe aktaralım:

app/aaaa/aaaa.component.tsimport { ActivatedRoute} from "@angular/router";

Servisi constructor'a enjekte edelim:

app/aaaa/aaaa.component.tsexport class AaaaComponent {
  constructor(private activateRoute: ActivatedRoute) {
    
  }
}

Parametreleri içeren nesneyi alalım:

app/aaaa/aaaa.component.tsexport class AaaaComponent {
  constructor(private activateRoute: ActivatedRoute) {
    let params = activateRoute.snapshot.params;
    console.log(params);
  }
}

Parametremizin değerini alalım:

app/aaaa/aaaa.component.tsexport class AaaaComponent {
  constructor(private activateRoute: ActivatedRoute) {
    let params = activateRoute.snapshot.params;
    let id = params['id'];
    console.log(id);
  }
}