Παιδικές Διαδρομές στο Angular

Μπορεί να συμβαίνει ότι σε ένα component που είναι ήδη ενεργοποιημένο στο routing, υπάρχουν επίσης παιδικά components. Μπορούμε να τα ρυθμίσουμε έτσι ώστε αυτά τα παιδικά components να εμφανίζονται επίσης μέσω του routing.

Για παράδειγμα, ας υποθέσουμε ότι έχουμε το component Aaaa. Προσπελαύνουμε αυτό το component μέσω του URL /aaaa/. Ας δημιουργήσουμε δύο ακόμη παιδικά components: Chix και Chiy. Θα τα εμφανίζουμε μέσα στο view του component Aaaa. Το Aaaa θα έχει το δικό του tag router-outlet, μέσα στο οποίο, ανάλογα με το URL, θα εμφανίζεται το ένα ή το άλλο παιδικό component.

Λοιπόν, ας υλοποιήσουμε όσα περιγράψαμε.

Ας δημιουργήσουμε το πρώτο παιδικό component:

ng generate component chix

Ας δημιουργήσουμε το δεύτερο παιδικό component:

ng generate component chiy

Ας γράψουμε ξεχωριστές παιδικές διαδρομές:

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

Ας τις προσθέσουμε στη διαδρομή του component Aaaa ως παιδικές:

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

Το path από τη διαδρομή του parent component θα είναι η αρχή του path του παιδικού. Αυτό σημαίνει ότι τα παιδικά components θα είναι προσβάσιμα από τα ακόλουθα URLs: /aaaa/chix και /aaaa/chiy.

Ας ρυθμίσουμε τώρα το component Aaaa. Ας εισάγουμε το tag για το routing:

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

Ας το δηλώσουμε στον decorator:

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

Ας εισάγουμε το tag στο view:

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

Τώρα θα μπορούμε να προσπελάσουμε τα παιδικά components από τα URLs τους και αυτά τα components θα εμφανίζονται. Δοκιμάστε το!

Υλοποιήστε την περιγραφόμενη λειτουργία των παιδικών components.

Δημιουργήστε links, μέσω των οποίων θα αλλάζουν τα παιδικά components.