Angular Router URL yollarını bileşenlere eşler, tek sayfalık uygulamada tam sayfa yeniden yüklemesi olmadan gezinmeyi sağlar. Yolları bileşenlere bağlayan bir route konfigürasyon dizisi tanımlarsınız.
{ } ;
: = [
{ : , : },
{ : , : },
{ : , : },
{ : , : ().( 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 istemci tarafında gezinme (yeniden yüklemesiz) gerçekleştirir ve routerLinkActive, bağlantının rotası etkin olduğunda CSS sınıfı ekler — navigasyon vurgulama için kullanışlıdır.
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'ı çok görünümlü bir SPA'ya dönüştüren şeydir — hızlı istemci tarafı gezintisi, URL tarafından yönlendirilen UI ve derin bağlantılanabilir sayfalar.
Rota konfigürasyonu, <router-outlet>, routerLink ile programlı Router.navigate karşılaştırması ve ActivatedRoute aracılığıyla parametre okuma, herhangi bir Angular uygulamasının günlük routing ihtiyaçlarını kapsar ve guard'lar ile lazy loading bu temele bina edilir.
Junior'dan Senior'a detaylı cevaplarla bir BT mülakat soruları kütüphanesi.
Bağış Yap