Trong bài này, chúng ta sẽ thực hành viết ứng dụng nhằm chia sẻ, truyền nhận dữ liệu giữa các Component sử dụng Service trong Angular (các bạn tham khảo việc chia sẽ dữ liệu giữa Parent và children sử dụng @Input, @Output tại đây).

Chúng ta sẽ sử dụng lại các đoạn code trong bài Tạo Wordcloud với Highchart. Tuy nhiên, thay vì sử dụng một Component với hai thành phần là HighChart và Table thì chúng ta sẽ tách chúng thành hai component riêng biệt là WordCloudChartComponent, SentenceTableComponent và thực hiện chia sẻ dữ liệu giữa hai component này thông qua DataService (người dùng click vào một từ bất kỳ trong WordCloudChartComponent. Từ này sẽ được truyền đến DataService và sau đó DataService sẽ truyền dữ liệu bao gồm từ được click và danh sách các câu chứa từ đó đến SentenceTableComponent)

1. WordCloudChartComponent

Ta sử dụng và chỉnh sửa lại code trong bài Tạo Wordcloud với Highchart như sau:

Lưu ý:

– Do việc hiển thị danh sách các sentence đã được tách thành một component riêng (SentenceTableComponent) nên chúng ta sẽ không sử dụng biến sentence_list

– Thay vì sử dụng hàm getSentences() chúng ta sẽ sử dụng hàm sendData() để truyền dữ liệu đến SentenceTableComponent

2. DataService

Ta sử dụng và chỉnh sửa lại code trong bài Tạo Wordcloud với Highchart như sau:

Lưu ý: ta sử dụng EventEmitter() để đảm bảo khi người dùng click vào một từ bất kỳ thì dữ liệu về từ đó sẽ được truyền đến SentenceTableComponent

3. SentenceTableComponent

Ta viết SentenceTableComponent như sau:

Ở đây ta khai báo biến data_service của DataService để nhận dữ liệu từ DataService mỗi khi có dữ liệu được Emit (DataService được khai báo ở mức root nên sẽ có duy nhất một instance của DataService được dùng chung cho tất cả các component. Điều này đảm bảo việc truyền nhận dữ liệu giữa các component là thống nhất, không có sự sai lệch giữa các instance khác nhau)

Cuối cùng, trong template của ứng dụng ta sử dụng selector để hiển thị view của hai component như sau:

Chúng ta khởi chạy ứng dụng với lệnh ng serve, ta được kết quả tương tự tại bài Tạo Wordcloud với Highchart:

Như vậy ta đã hoàn thành việc viết ứng dụng chia sẻ, truyền nhận dữ liệu giữa hai Component khác nhau. Các bạn có thể tham khảo toàn bộ code trong bài hướng dẫn này trong trang Github của Itech Seeker tại đây.

Tháng Tám 23, 2021
ITechSeeker