Questions Management – Frontend – Xây dựng giao diện phần thêm mới option

Xem toàn bộ series bài viết hướng dẫn xây dựng ứng dụng Questions Management tại đây.

Hiện tại trong ứng dụng Questions Management của chúng ta, có 2 chỗ cho phép chúng ta có thể thêm mới một option. Đó là trong trang hiển thị tất cả các question:

Questions Management – Frontend – Xây dựng giao diện phần thêm mới option

Chỗ thứ hai đó là trong trang hiển thị chi tiết của một question:

Questions Management – Frontend – Xây dựng giao diện phần thêm mới option

Để thực hiện chức năng thêm mới option này, mình sẽ tạo mới một Component tên là NewOptionComponent nằm trong thư mục src/app/questions/all_questions.

Nội dung của Component này ban đầu sẽ như sau:

với tập tin new_option.component.html có nội dung như sau:

Như các bạn thấy, mình đã xây dựng một form để chúng ta có thể nhập thông tin của một Option bao gồm: description của option, correct mang ý nghĩa là option này là đúng hay sai cho question này, note thì để chứa một số thông tin thêm về option này.

Bây giờ chúng ta sẽ khai báo NewOptionComponent vào QuestionsModule:

Và khai báo Routing cho nó:

Như các bạn thấy, URL được khai báo cho NewOptionComponent là “/new-option”. Bởi vì một option phải thuộc về một câu hỏi nào đó, nên khi đi đến trang thêm mới option này, chúng ta sẽ cần truyền thêm thông tin về question id mà option này đang thuộc về. Request URL sẽ có dạng như sau: “/new-option?questionId={questionId}”.

Bước cuối cùng trong phần xây dựng giao diện cho phần thêm mới Option này là chúng ta sẽ sửa lại 2 chỗ có button thêm mới Option mà mình đã đề cập ở trên, để khi người dùng click vào 2 button trên, ứng dụng của chúng ta sẽ đi đến trang thêm mới option.

Cụ thể, trong tập tin all_questions.component.html, chúng ta sẽ sửa đoạn code:

thành:

Và trong tập tin question.component.html, chúng ta sẽ sửa đoạn code:

thành:

Đến đây thì chúng ta đã hoàn thành việc xây dựng phần giao diện cho trang thêm mới option.

Bây giờ nếu các bạn chạy lại ứng dụng, đi đến trang “All Questions” và click vào button thêm mới option, kết quả sẽ như sau:

Questions Management – Frontend – Xây dựng giao diện phần thêm mới option

Tương tự như vậy nếu bạn click vào button “Add New Option” trong trang chi tiết của một question.

Chia sẽ bài viết này ...Share on Facebook
Facebook
0Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

Add Comment