Σύνδεσμοι για δρομολόγηση στο Angular

Στα προηγούμενα μαθήματα εισαγάγαμε το URL manually στη γραμμή διευθύνσεων. Ας δημιουργήσουμε τώρα συνδέσμους, η πλοήγηση στους οποίους θα εμφανίζει διάφορα components.

Για να το κάνουμε αυτό, θα δημιουργήσουμε τους συνδέσμους με έναν ειδικό τρόπο. Το θέμα είναι ότι δεν χρειαζόμαστε πραγματική πλοήγηση στους συνδέσμους. Απλά θέλουμε το Angular να εμφανίσει ένα άλλο component, να αλλάξει το URL στη γραμμή διευθύνσεων του browser και ταυτόχρονα να μην ανανεώσει τη σελίδα.

Επομένως, αντί για το εγγενές attribute href θα χρησιμοποιήσουμε το attribute του Angular RouterLink.

Για να το κάνουμε αυτό, πρέπει να το εισάγουμε:

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

Να το δηλώσουμε στον decorator:

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

Τώρα μπορούμε να δημιουργήσουμε τους συνδέσμους μας:

<nav>
	<a routerLink="/aaaa/">
		Aaaa
	</a>
	<a routerLink="/bbbb/">
		Bbbb
	</a>
</nav>

Δημιουργήστε συνδέσμους που να εναλλάσσουν τα components σας.