Khi viết các ứng dụng web với Angular, ta thường gặp trường hợp khi component được load trước khi có dữ liệu của component đó (do phải đợi dữ liệu trả về từ server API). Trong trường hợp này chúng ta có thể thêm Material Spinner để thông báo tới người dùng là dữ liệu đang được tải về. Tuy nhiên, chúng ta cũng có thể sử dụng Resolver để load dữ liệu trước khi Angular hoàn tất việc load các component (thường chỉ sử dụng Resolver khi thời gian xử lý dữ liệu ngắn để tránh tình trạng người dùng phải đợi lâu trước khi hiển thị view của component).

Resolver là một class implement Resolve Interface của Angular Router với hàm resolve() được thực thi khi quá trình điều hướng (navigation) diễn ra (Resolver cũng là một service mức độ root). Router sẽ đợi đến khi dữ liệu được xử lý xong trước khi thực hiện việc định hướng (route) trang web

Trong bài này, chúng ta sẽ thực hành viết chương trình hiển thị dữ liệu là các bài post lấy từ API url là https://jsonplaceholder.typicode.com/posts

Trước hết chúng ta tạo một project với PostTableModule, PostTableComponent, DataService và thêm Angular material như sau (tham khảo thêm tại bài Tạo Wordcloud với Highchart):

Ngoài ra, Resolver cũng là một service nên ta tạo PostResolverService với dòng lệnh sau:

1. DataService (data.service.ts)

Chúng ta sử HttpClient Get để lấy dữ liệu từ server API như sau:

– Lưu ý: hàm getPost() trả về một Observable và chúng ta không sử dụng subscribe để xử lý kết quả của HttpClient Get tại DataService

2. PostResolverService (post-resolver.service.ts)

PostResolverService là Resolver implement Resolve interface nên ta viết hàm resolve() của interface này như sau:

Tiếp theo chúng ta cấu hình route cho ứng dụng và khai báo resolver tại file app-routing.module.ts như sau:

3. PostTableComponent (post-table.component.ts)

Trong PostTableComponent, chúng ta sử dụng ActivatedRoute để lấy dữ liệu từ Resolver như sau:

4. Post Template (post-table.component.html):

Chúng ta viết template để hiển thị các bài post dưới dạng table như sau:

5. Root Module

Trong bài này ta sử dụng Router và HttpClient (sử dụng hàm get để lấy dữ liệu từ server API), do đó trong file app.module.ts ta thực hiện import các modules này như sau:

Ngoải ra, để hiện thị các route component, ta thêm <router-outlet></router-outlet> vào file app.component.html như sau:

Chúng ta khởi chạy ứng dụng với lệnh ng serve và truy cập theo route path đã cấu hình (http://localhost:4200/post) ta được kết quả sau:

Như vậy ta đã hoàn thành việc viết ứng dụng sử dụng Resolver để load dữ liệu trước khi Angular hoàn tất việc load các component. Các bạn có thể tham khảo toàn bộ code của bài này trong trang Github của Itech Seeker tại đây.

Tháng Tám 26, 2021
ITechSeeker