Angular-da Usaq Marşrutlar

Ola bilər ki, artıq yönləndirmədə iştirak edən komponentdə usaq komponentləri də olsun. Bu usaq komponentlərinin həmçinin yönləndirmə vasitəsilə göstərilməsini təmin etmək olar.

Nümunə üçün, bizim Aaaa adlı komponentimiz olsun. Biz ona /aaaa/ URL-i vasitəsilə müraciət edirik. Gəlin daha iki usaq komponenti yaradaq: Chix və Chiy. Onları Aaaa komponentinin görünüşü daxilində göstərəcəyik. Aaaa komponentinin öz router-outlet teqi olacaq, hansında ki, URL-dən asılı olaraq ya birinci, ya da ikinci usaq komponenti göstəriləcək.

Beləliklə, gəlin təsvir olunanı həyata keçirək.

Birinci usaq komponentini yaradaq:

ng generate component chix

Ikinci usaq komponentini yaradaq:

ng generate component chiy

Ayrı-ayrı usaq marşrutlarını yazaq:

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

Onları Aaaa komponentinin marşrutuna usaq kimi əlavə edək:

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

Ana komponentin marşrutunun yolu usaq marşrutunun yolunun başlanğıcı olacaq. Bu o deməkdir ki, usaq komponentləri aşağıdakı URL-lər üzərindən əldə edilə bilər: /aaaa/chix və /aaaa/chiy.

Gəlin indi Aaaa komponentini quraşdıraq. Yönləndirmə üçün teqi import edək:

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

Onu dekoratorda qeyd edək:

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

Teqi görünüşə əlavə edək:

<p>işləyir</p>
<router-outlet></router-outlet>

Indi usaq komponentlərinə onların URL-ləri üzərindən müraciət etmək olar və bu komponentlər göstəriləcək. Sınayın!

Təsvir olunan usaq komponentlərinin işini həyata keçirin.

Usaq komponentləri arasında keçid edəcək keçidlər yaradın.