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.
موجه التوجيه هو ما يحول Angular إلى تطبيق SPA متعدد الآراء — تنقل سريع من جانب العميل وواجهة مستخدم موجهة برابط العنوان وصفحات قابلة للربط العميق.
معرفة تكوين المسار و<router-outlet> وrouterLink مقابل Router.navigate البرمجي وقراءة المعاملات عبر ActivatedRoute تغطي احتياجات التوجيه اليومية لأي تطبيق Angular، مع الحراس والتحميل الكسول يبنيان على هذا الأساس.
مكتبة من أسئلة مقابلات تقنية المعلومات مع إجابات مفصّلة — من المبتدئ إلى المتقدم.
تبرع