Cẩm nang công nghệ

Trong bài viết này, tôi sẽ nói thêm về Routing trong Angular và một số điều hay ho của nó mà bạn có thể chưa biết đến.

Cấu hình wildcard routes

Một ứng dụng hoạt động tốt sẽ xử lý một cách linh hoạt khi người dùng cố gắng điều hướng đến một phần không tồn tại của ứng dụng của bạn. Để thêm chức năng này vào ứng dụng của bạn, bạn thiết lập một định tuyến ký tự đại diện. Bộ định tuyến Angular chọn tuyến đường này bất kỳ lúc nào URL được yêu cầu không khớp với bất kỳ đường dẫn bộ định tuyến nào.

Để thiết lập tuyến đường theo ký tự đại diện, hãy thêm mã sau vào định nghĩa tuyến đường của bạn.

{ path: '**', component: }

Với hai dấu hoa thị **, ta cho Angular biết rằng định nghĩa các định tuyến này là một tuyến đường ký tự đại diện. Đối với thuộc tính thành phần, bạn có thể xác định bất kỳ thành phần nào trong ứng dụng của mình. Các lựa chọn phổ biến bao gồm PageNotFoundComponent dành riêng cho ứng dụng, mà bạn có thể xác định để hiển thị trang 404 cho người dùng của mình; hoặc chuyển hướng đến thành phần chính của ứng dụng của bạn. Tuyến ký tự đại diện là tuyến cuối cùng vì nó khớp với bất kỳ URL nào. Để biết thêm chi tiết về lý do tại sao thứ tự quan trọng đối với các tuyến đường.

Thứ tự định tuyến

Thứ tự định tuyến rất quan trọng vì Bộ định tuyến sử dụng chiến lược first-match ( phù hợp đầu tiên) khi kết hợp các route, vì vậy các route mô tả cụ thể chi tiết hơn nên được đặt bên trên các route ít cụ thể hơn. Liệt kê các route với một đường dẫn tĩnh trước tiên, tiếp theo là một route trống, phù hợp với tuyến đường mặc định. Tuyến ký tự đại diện đến cuối cùng vì nó khớp với mọi URL và Bộ định tuyến chỉ chọn nó nếu không có route nào khác khớp trước.

Hiển thị page lỗi 404 Để hiển thị trang 404, hãy thiết lập một tuyến ký tự đại diện với thuộc tính thành phần được đặt thành thành phần bạn muốn sử dụng cho trang 404 của mình như sau:

const routes: Routes = [ { path: 'first-component', component: FirstComponent }, { path: 'second-component', component: SecondComponent }, { path: '**', component: PageNotFoundComponent }, // Wildcard route for a 404 page];

Route cuối cùng với đường dẫn của ** là một tuyến ký tự đại diện. Bộ định tuyến chọn tuyến này nếu URL được yêu cầu không khớp với bất kỳ đường dẫn nào trước đó trong danh sách và gửi người dùng đến PageNotFoundComponent.

Cài đặt thuộc tính redirects

Để thiết lập chuyển hướng, hãy định cấu hình một tuyến với đường dẫn bạn muốn chuyển hướng, thành phần bạn muốn chuyển hướng đến và giá trị pathMatch cho bộ định tuyến biết cách khớp URL.

const routes: Routes = [ { path: 'first-component', component: FirstComponent }, { path: 'second-component', component: SecondComponent }, { path: '', redirectTo: '/first-component', pathMatch: 'full' }, // redirect to `first-component` { path: '**', component: PageNotFoundComponent }, // Wildcard route for a 404 page];

Trong ví dụ này, tuyến thứ ba (path: ' ') là một chuyển hướng để bộ định tuyến mặc định là tuyến tới first-component. Lưu ý rằng chuyển hướng này đứng trước tuyến ký tự đại diện. Ở đây, path: '' có nghĩa là sử dụng URL tương đối ban đầu ('').

Để biết thêm chi tiết về pathMatch, hãy xem Spotlight trên pathMatch.

Nesting routes

Phần này sẽ nói về cấu hình chi tiết các route phức tạp, cần lồng bên trong nhau.

Khi ứng dụng của bạn phát triển phức tạp hơn, bạn có thể muốn tạo các tuyến liên quan đến một component khác với thành phần root của bạn. Các loại tuyến đường lồng nhau này ( nested routes) được gọi là các tuyến đường con ( child routes). Điều này có nghĩa là bạn đang thêm thứ hai vào ứng dụng của mình, vì nó bổ sung cho trong AppComponent.

Trong ví dụ này, có hai components bổ sung, child-a và child-b. Ở đây, FirstComponent có