Angular Router - İç içe rota kullanımı - Children route tanımlama

Merhaba,


Bu yazıda Angular'da routing dosyamızda childen route yani iç içe veya çocuk rota tanımlama ve kullanımından bahsedeceğim. Children route aslında layout ihtiyacı duyduğumuzda kullandığımız bir çözüm yöntemidir. Şöyle ki;


Aynı şablona sahip 3 sayfamız var diyelim. Bunlar Login, Register ve Forgot Password sayfaları olsun. Bu sayfalarda değişen tek şey sadece formlar olacak diğer kısımlar aynı.


app-routing.module.ts dosyasında rotaları tanımlarken iki farklı şekilde bunu yapabiliriz;


1. yöntemimiz şu şekilde;

{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
{ path: 'forgot-password', component: ForgotPasswordComponent }


2. yöntemimiz ise şu şekilde;

{
  path: 'account',
  component: AccountComponent,
  children: [
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },
    { path: 'forgot-password', component: ForgotPasswordComponent }
  ]
}


Bu yöntemler arasındaki farklar ne?

  • İlk yöntemdeki gibi yaptığımızda LoginComponent, RegisterComponent ve ForgotPasswordComponent html dosyalarında formlar dışında aynı kodlar olacak. Aynı olan kısımlardan bir yeri değiştirdiğimizde üç komponentten de silmemiz gerekecek.
  • İkinci yöntemdeki gibi yaptığımızda AccountComponent diye bir layout görevi görecek komponentimiz olacak. Diğer komponentlerdeki aynı kodlar yani şablon account.component.html içinde olacak ve sadece değişiklik gösterecek bölümün olacağı yerde <router-outlet></router-outlet> olacak. Daha sonra LoginComponent RegisterComponent ve ForgotPasswordComponent html dosyalarında kendilerine ait formlar olacak. Bunlarda AccountComponent içindeki <router-outlet> te görünecek.


İlk yöntemde linkimiz localhost:4200/login ken ikinci yöntemde localhost:4200/account/login olmuş oluyor. Tabiki siz path içerisinde bir şey yazmazsanız yine /login den açabilirsiniz. Ben sadece orada yazılan değerin nasıl bir etki yaptığını göstermek amacıyla o şekilde ekledim.


Bu çok basit bir olaydır. Umarım faydalı olur.


Teşekkürler.

Mehmet Sert

HTML, CSS, Javascript ve Angular konularında tecrübe edinmiş ve Bursa'da Frontend Developer olarak bir firmada görev almaktayım. Yeni teknolojilere meraklıyım, öğrendiklerimi uygulayarak ve anlatarak pekiştirmeyi seviyorum....

"Angular Router - İç içe rota kullanımı - Children route tanımlama" için 2 yorum yapıldı.
A.A
Ahmet Aslan 05 Ağustos 2019

Bu yaptığımız modelde localhost:4200/account linkinin açılmasını nasıl engelleyebiliriz? Bu link açılırsa yazdığımız formlardan hiçbirisi görüntülenmez ve istemediğimiz bir durum olur.

Mehmet Sert (Yazı sahibi)06 Ağustos 2019

Merhaba Ahmet Aslan, Güzel bir soru sormuşsun teşekkür ederim. localhost:4200/account linkini açan birini child route'lardan birine yönlendirerek bunu çözebiliriz. Mesela /account a girildiğinde onu /account/login e yönlendirelim. Bunuda; app-routing.module.ts dosyasında route'ları tanımlarken account path'i ve children'larını tanımladığımız satırın hemen bir üstüne aşağıdaki tanımlamayı ekleyerek yaparız. { path: 'account', redirectTo: 'account/login', pathMatch: 'full' } Bu redirectTo ve pathMatch keylerini mevcut tanımlamanın içinde yaparsak çalışmaz o yüzden bunu ayrı bir route gibi tanımlamak gerekiyor. Burada redirectTo adından da anlaşılacağı gibi yönleneceği adres, pathMatch: 'full' ise linkte sadece path'te yazan değer varsa anlamına geliyor. Birde bu satırı childrenları tanımladığımız satırın üstüne almamız gerekiyor

Yorum yap * E-posta adresiniz yayınlanmayacak.