შვილობილი მარშრუტები Angular-ში

შეიძლება ისეთი სიტუაცია წარმოიშვას, როდესაც კომპონენტში, რომელიც უკვე გამოყენებულია როუტინგში, ასევე არის შვილობილი კომპონენტები. შესაძლებელია ისეთი სტრუქტურის შექმნა, რომ ეს შვილობილი კომპონენტებიც გამოჩნდნენ როუტინგის მეშვეობით.

მაგალითისთვის დავუშვათ, გვაქვს კომპონენტი Aaaa. ჩვენ მას ვპოულობთ მისამართით /aaaa/. შევქმნათ კიდევ ორი შვილობილი კომპონენტი: Chix და Chiy. მათ ჩვენ გამოვაჩენთ შიგნით კომპონენტის Aaaa გამოსახულებაში. Aaaa-ს ექნება საკუთარი ტეგი router-outlet, რომელშიც URL-ის მიხედვით გამოჩნდება ან ერთი, ან მეორე შვილობილი კომპონენტი.

მოდით, განვახორციელოთ აღწერილი.

შევქმნათ პირველი შვილობილი კომპონენტი:

ng generate component chix

შევქმნათ მეორე შვილობილი კომპონენტი:

ng generate component chiy

დავწეროთ ცალკე შვილობილი მარშრუტები:

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

დავუმატოთ ისინი კომპონენტის Aaaa მარშრუტს, როგორც შვილობილები:

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

მშობელი კომპონენტის მარშრუტის გზა იქნება შვილობილი კომპონენტის გზის დასაწყისი. ეს ნიშნავს, რომ შვილობილი კომპონენტები იქნება ხელმისაწვდომი შემდეგი მისამართებით: /aaaa/chix და /aaaa/chiy.

მოდით ახლა კონფიგურირება გავუკეთოთ კომპონენტს Aaaa. იმპორტი გავუკეთოთ როუტინგის ტეგს:

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

ჩავწეროთ ის დეკორატორში:

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

ჩავსვათ ტეგი გამოსახულებაში:

<p>მუშაობს</p>
<router-outlet></router-outlet>

ახლა შესაძლებელი იქნება მიმართო შვილობილ კომპონენტებს მათი მისამართებით და ეს კომპონენტები გამოჩნდება. სცადეთ!

რეალიზება გაუკეთეთ აღწერილ მუშაობას შვილობილი კომპონენტების.

შექმენით ბმულები, რომლებითაც გადაირთვება შვილობილი კომპონენტები.