Το Angular Router αντιστοιχεί διαδρομές URL σε συστατικά, ενεργοποιώντας πλοήγηση σε μια εφαρμογή μιας σελίδας χωρίς πλήρη επαναφόρτωση της σελίδας. Ορίζετε έναν πίνακα διαμόρφωσης δρομολογίων που συνδέει διαδρομές με συστατικά.
{ } ;
: = [
{ : , : },
{ : , : },
{ : , : },
{ : , : ().( m.) },
{ : , : },
];
<!-- the router renders the matched component here -->
<router-outlet></router-outlet>
<a routerLink="/users" routerLinkActive="active">Users</a>
<a [routerLink]="['/users', user.id]">View {{ user.name }}</a> <!-- dynamic path -->
Το routerLink εκτελεί πλοήγηση στην πλευρά του πελάτη (χωρίς επαναφόρτωση), και το routerLinkActive προσθέτει μια κλάση CSS όταν η διαδρομή του συνδέσμου είναι ενεργή — χρήσιμο για επισήμανση περιήγησης.
import { Router } from "@angular/router";
export class LoginComponent {
constructor(private router: Router) {}
onLogin() {
this.router.navigate(["/dashboard"]); // navigate after an action
}
}
import { ActivatedRoute } from "@angular/router";
export class UserDetailComponent implements OnInit {
constructor(private route: ActivatedRoute) {}
ngOnInit() {
// read :id from the URL (params is an Observable, since it can change)
this.route.params.subscribe(p => this.userId = p["id"]);
// or snapshot for a one-time read:
const id = this.route.snapshot.paramMap.get("id");
}
}
Nested/child routes, route guards (auth), resolvers (pre-fetch data),
query params, and lazy loading of feature routes for code splitting.
Το Router είναι αυτό που μετατρέπει το Angular σε SPA πολλαπλών προβολών — γρήγορη πλοήγηση στην πλευρά του πελάτη, διεπαφή χρήστη που οδηγείται από URL και σελίδες με βαθιά σύνδεσμο.
Η γνώση της διαμόρφωσης δρομολογίων, του <router-outlet>, του routerLink έναντι του προγραμματικού Router.navigate και η ανάγνωση παραμέτρων μέσω του ActivatedRoute καλύπτουν τις καθημερινές ανάγκες δρομολογίου οποιασδήποτε εφαρμογής Angular, με φρουρούς και μεσολάβηση φόρτωσης να βασίζονται σε αυτό το θεμέλιο.
Μια βιβλιοθήκη ερωτήσεων συνέντευξης IT με αναλυτικές απαντήσεις — από Junior έως Senior.
Δωρεά