Angular Router ánh xạ các đường dẫn URL tới các component, cho phép điều hướng trong một ứng dụng single-page mà không tải lại toàn trang. Bạn định nghĩa một mảng cấu hình route liên kết các đường dẫn với các component.
{ } ;
: = [
{ : , : },
{ : , : },
{ : , : },
{ : , : ().( m.) },
{ : , : },
];
<!-- router render component khớp ở đây -->
<router-outlet></router-outlet>
<a routerLink="/users" routerLinkActive="active">Users</a>
<a [routerLink]="['/users', user.id]">View {{ user.name }}</a> <!-- đường dẫn động -->
routerLink thực hiện điều hướng phía client (không tải lại), còn routerLinkActive thêm một CSS class khi route của liên kết đang active — tiện cho việc highlight thanh điều hướng.
import { Router } from "@angular/router";
export class LoginComponent {
constructor(private router: Router) {}
onLogin() {
this.router.navigate(["/dashboard"]); // điều hướng sau một hành động
}
}
import { ActivatedRoute } from "@angular/router";
export class UserDetailComponent implements OnInit {
constructor(private route: ActivatedRoute) {}
ngOnInit() {
// đọc :id từ URL (params là một Observable, vì nó có thể thay đổi)
this.route.params.subscribe(p => this.userId = p["id"]);
// hoặc snapshot để đọc một lần:
const id = this.route.snapshot.paramMap.get("id");
}
}
Route lồng nhau/route con, route guard (xác thực), resolver (lấy trước dữ liệu),
query param, và lazy loading các route feature để code splitting.
Router là thứ biến Angular thành một SPA đa view — điều hướng phía client nhanh, UI điều khiển bằng URL, và các trang có thể deep-link.
Biết cấu hình route, <router-outlet>, routerLink so với Router.navigate bằng code, và đọc tham số qua ActivatedRoute bao quát các nhu cầu routing thường ngày của bất kỳ ứng dụng Angular nào, với guard và lazy loading xây dựng trên nền tảng này.