Thiết lập định tuyến cơ bản trong Angular

Bây giờ hãy thiết lập định tuyến. Hãy làm sao để nếu trong thanh địa chỉ trình duyệt gõ URL /aaaa/, thì thành phần đầu tiên sẽ được hiển thị, còn nếu gõ /bbbb/, thì thành phần thứ hai hiện ra.

Thiết lập như vậy được thực hiện trong tệp app.routes.ts. Đầu tiên cần nhập các thành phần của chúng ta:

import { AaaaComponent } from './aaaa/aaaa.component';
import { BbbbComponent } from './bbbb/bbbb.component';

Và bây giờ cần chỉ định URL nào tương ứng với thành phần nào. Để làm điều này cần tạo một mảng đặc biệt các đối tượng chứa các tuyến đường (route). Trong mỗi đối tượng sẽ có khóa path, trong đó thiết lập URL (không có dấu gạch chéo ở cuối), và khóa component, trong đó chỉ định thành phần sẽ được hiển thị tại URL này:

export const routes: Routes = [
	{ path: 'aaaa', component: AaaaComponent },
	{ path: 'bbbb', component: BbbbComponent },
];

Tuy nhiên, chỉ thiết lập định tuyến là chưa đủ. Cần chỉ định trong thành phần cha vị trí mà các thành phần của chúng ta sẽ được hiển thị. Chúng ta sẽ giải quyết việc này trong bài học tiếp theo.

Thiết lập định tuyến trong tệp app.routes.ts.