Angular’ da child(nested) yani iç-içe route’ lar oluşturabilirsiniz.
- Child route kendi Component’ ine sahip olabilir.
- Child route, ana route’ un içerisinde kendisine ait view’ a sahip olabilir.
Child Route tanımlaması;
-
Ana route’ a child route’ lar eklemek için, ilgili ana route’ u tanımlayan objenin içerisinde "children" isimli bir öznitelik oluşturup, dizi içerisinde her bir child route’ u tanımlıyoruz. Child route’ lar, ana route’ a append olur. Yani child route’ un url’ i, ana route’ un url’ ine ek olur. Örneğin, product ana route’ unun altına birkaç child route tanımlayalım;
const appRoutes: Routes = [ {path: 'product/:id', component: ProductComponent, children : [ {path: 'detail', component: ProductDetailComponent} ]} ]; -
"detail" path’ i eklediğim bir child route oluşturdum. Child route tanımlaması yaparken, path’ in başına "/" koymanıza gerek yoktur. Otomatik olarak eklenir. child route için, ana route’ un component’ in den farklı bir component açtım.
-
Child route’ un component’ in varlık gösterebilmesi için, ana route’ un template’ i içerisine istediğiniz bir alana, router-outlet elementini eklemeniz gerekiyor, child route’ ların template’ leri bu element içerisinde varlık gösterecek;
<h1>{{product.name}}</h1>
<->child route' ların varlık göstereceği alan başlangıç</->
<router-outlet></router-outlet>
<->child route' ların varlık göstereceği alan bitiş</->CANLI ÖRNEK;
Comments