Các tuyến đường con trong Angular

Có thể xảy ra trường hợp trong một thành phần đã được sử dụng trong định tuyến, cũng có các thành phần con. Có thể làm sao để những thành phần con này cũng được hiển thị thông qua định tuyến.

Ví dụ, giả sử chúng ta có thành phần Aaaa. Chúng ta truy cập nó thông qua URL /aaaa/. Hãy tạo thêm hai thành phần con: Chix và Chiy. Chúng ta sẽ hiển thị chúng bên trong view của thành phần Aaaa. Aaaa sẽ có thẻ router-outlet của riêng nó, trong đó tùy thuộc vào URL sẽ hiển thị thành phần con này hoặc thành phần con kia.

Vậy, hãy triển khai những gì đã mô tả.

Tạo thành phần con đầu tiên:

ng generate component chix

Tạo thành phần con thứ hai:

ng generate component chiy

Viết các tuyến đường con riêng biệt:

let childRoutes: Routes = [
	{ path: 'chix', component: ChixComponent },
	{ path: 'chiy', component: ChiyComponent },
];

Thêm chúng vào tuyến đường của thành phần Aaaa như là các tuyến con:

const appRoutes: Routes = [
	{
		path: 'aaaa',
		component: AaaaComponent,
		children: childRoutes
	},
];

Đường dẫn từ tuyến đường của thành phần cha sẽ là phần đầu của đường dẫn đến thành phần con. Điều này có nghĩa là các thành phần con sẽ có thể truy cập được tại các URL sau: /aaaa/chix và /aaaa/chiy.

Bây giờ hãy cấu hình thành phần Aaaa. Import thẻ dành cho định tuyến:

import { RouterOutlet } from '@angular/router';

Khai báo nó trong decorator:

@Component({
	......
	imports: [RouterOutlet],
	......
})

Chèn thẻ vào view:

<p>nó hoạt động</p>
<router-outlet></router-outlet>

Bây giờ có thể truy cập vào các thành phần con theo URL của chúng và các thành phần này sẽ được hiển thị. Hãy thử nhé!

Triển khai chức năng của các thành phần con như đã mô tả.

Tạo các liên kết để chuyển đổi giữa các thành phần con.