Angular'da Alt Rotalar

Zaten yönlendirmede kullanılan bir bileşenin içinde alt bileşenler de bulunabilir. Bu alt bileşenlerin aynı zamanda yönlendirme yoluyla gösterilmesini sağlamak mümkündür.

Örnek olarak, Aaaa adında bir bileşenimiz olsun. Bu bileşene /aaaa/ URL'si ile erişiyoruz. Şimdi iki alt bileşen daha oluşturalım: Chix ve Chiy. Bunları Aaaa bileşeninin görünümü içinde göstereceğiz. Aaaa bileşeninin kendi router-outlet etiketi olacak ve bu etiketin içinde, URL'ye bağlı olarak bir veya diğer alt bileşen gösterilecek.

O halde, anlatılanları hayata geçirelim.

İlk alt bileşeni oluşturalım:

ng generate component chix

İkinci alt bileşeni oluşturalım:

ng generate component chiy

Ayrı alt rotalar yazalım:

let childRoutes: Routes = [
	{ path: 'chix', component: ChixComponent },
	{ path: 'chiy', component: ChiyComponent },
];

Bunları Aaaa bileşeninin rotasına alt öğe olarak ekleyelim:

const appRoutes: Routes = [
	{
		path: 'aaaa',
		component: AaaaComponent,
		children: childRoutes
	},
];

Ana bileşenin rotasının yolu, alt bileşenin yolunun başlangıcı olacaktır. Bu şu anlama gelir: alt bileşenlere /aaaa/chix ve /aaaa/chiy URL'leri üzerinden erişilebilecek.

Şimdi Aaaa bileşenini yapılandıralım. Yönlendirme için gerekli etiketi içe aktaralım:

import { RouterOutlet } from '@angular/router';

Decorator içinde tanımlayalım:

@Component({
	......
	imports: [RouterOutlet],
	......
})

Etiketi görünüme yerleştirelim:

<p>it works</p>
<router-outlet></router-outlet>

Artık alt bileşenlere kendi URL'leri üzerinden erişilebilecek ve bu bileşenler gösterilebilecek. Deneyin!

Açıklanan alt bileşen işleyişini uygulayın.

Alt bileşenler arasında geçiş yapılmasını sağlayan bağlantılar oluşturun.