Đã đến lúc bắt đầu bài tập đầu tiên trong khóa học này.
Trong nhiệm vụ này, bạn sẽ được làm việc với các thành phần góc cạnh.
Bạn sẽ tạo ra một thành phần mới được gọi là dishdetail
để thêm nó vào ứng dụng góc cạnh của bạn,
và bạn sẽ cập nhật mẫu của nó, để nó hiển thị các chi tiết của một món ăn cụ thể.
Trước đó, trong bài tập trước, chúng tôi đã giới thiệu một thẻ vào thành phần menu của chúng tôi.
Chúng tôi sẽ loại bỏ thẻ đó, và thay vào đó bao gồm các
thành phần dishdetail ở vị trí của thẻ đó
để các thành phần dishdetail sẽ có thể hiển thị thông tin của nó
trong phần đó của màn hình.
Nhiệm vụ đầu tiên của bạn là tạo ra thành phần dishdetail.
Khi kết thúc nhiệm vụ đầu tiên, một khi bạn đã tạo ra thành phần dishdetail
, sau đó, trong tập tin mẫu thành phần menu,
bạn sẽ thay thế thẻ đó bằng cách chọn
thành phần dishdetail trong
đó, để các chi tiết của thành phần dishdetail sẽ được hiển thị
ngay bên dưới trình đơn trong thành phần trình đơn.
Chúng ta đã thấy làm thế nào bạn có thể thêm
bộ chọn đó từ một thành phần vào một thành phần khác.
Khi chúng tôi tạo thành phần menu,
chúng tôi đưa vào thành phần ứng dụng,
để vào cuối nhiệm vụ đầu tiên, đây sẽ là kết quả trên trình duyệt
của bạn, ở đâu, thay vì thẻ hiển thị các chi tiết của món ăn,
bạn sẽ thấy những từ gọi là “dishdetail works!” ở dưới cùng của trang.
Một khi bạn hoàn thành điều này, sau đó bạn sẽ tải về
một tập tin mẫu thành phần dishdetail cấu hình sẵn với một số mảnh bị thiếu,
và sau đó thay thế vào vị trí trong mẫu của thành phần dishdetail của bạn.
Một khi bạn thay thế mẫu của thành phần dishdetail được cung cấp,
sau đó bạn sẽ thấy trang cập nhật như thế này.
Vì vậy, bạn sẽ thấy hai phần trong trang ở đây, một phần trong đó nói
“Hiển thị các chi tiết của món ăn ở đây.”
Bạn sẽ sử dụng một thành phần thẻ để tạo ra các chi tiết của món ăn,
và hiển thị món ăn đó ở đây.
Ngoài ra, bạn cũng sẽ hiển thị một tập hợp các ý kiến về món ăn
trong phần thứ hai của thành phần này ở đây.
Bây giờ, để giúp bạn bắt đầu, trong hướng dẫn phân công,
tôi đã cung cấp cho bạn một đối tượng JavaScript mới
chứa các chi tiết của món ăn,
bao gồm các ý kiến về món ăn đó.
Bạn sẽ sử dụng thông tin đó để xây dựng
hai: thành phần thẻ để hiển thị
các chi tiết của món ăn, và danh sách các nhận xét ở đây.
Nhiệm vụ thứ hai của bạn là sau đó cập nhật
tập tin TypeScript của bạn để bao gồm các biến món ăn mới trong đó,
và sau đó sử dụng biến món ăn với các thành phần thẻ,
và sau đó chuẩn bị các thành phần thẻ ở đây để hiển thị các chi tiết của món ăn.
Một khi bạn hoàn thành nhiệm vụ thứ hai,
trong ứng dụng của bạn, bạn sẽ thấy rằng,
ngay bên dưới menu, bạn sẽ thấy các chi tiết của
thông tin món ăn được hiển thị trong một thẻ như thế này,
vì vậy bạn có thể thấy tiêu đề, hình ảnh,
và cũng là mô tả được thực hiện dưới đây.
Bây giờ, sau khi bạn hoàn thành điều này, sau đó bạn sẽ chuyển sang nhiệm vụ thứ ba.
Trong nhiệm vụ thứ ba, bạn sẽ sử dụng các nhận xét cũng được kèm theo bên trong
món ăn mà chúng tôi đã cung cấp cho bạn trong đối tượng JavaScript,
và sau đó sử dụng nó để xây dựng và hiển thị một danh sách các nhận xét ở đây.
Khi kết thúc nhiệm vụ thứ ba,
đây là những gì bạn sẽ thấy được hiển thị ở phía bên phải của món ăn của bạn.
Bạn có thể thấy rằng bạn có một tiêu đề ở đây với
từ “Nhận xét”,
và sau đó bạn có một danh sách các nhận xét được hiển thị ở đây.
Các thông tin để xây dựng các ý kiến này có sẵn bên trong
đối tượng JavaScript món ăn mà chúng tôi đã cung cấp cho bạn.
Đặc biệt, lưu ý rằng đây là nhận xét thực tế,
đây là số sao được đưa ra cho nhận xét đó,
và đây là nơi chúng tôi hiển thị tên tác giả với hai dấu gạch ngang ở phía trước,
và lưu ý, ở cuối, chúng tôi hiển thị ngày ở đây.
Để có thể xây dựng ngày này ở đây,
bạn cần phải sử dụng một đường ống góc có tên là Date.
Chúng tôi đã thấy việc sử dụng một đường ống tích hợp được gọi là chữ hoa
trong bài tập trước đó,
vì vậy bạn chỉ cần sử dụng đường ống Date để tạo
ngày này được hiển thị ở bên phải tên của tác giả ở đây.
Vì vậy, đó là những gợi ý để bạn bắt đầu với
nhiệm vụ thứ ba này trong nhiệm vụ đầu tiên của bạn.
Hãy vui vẻ hoàn thành nhiệm vụ đầu tiên.
Bất kể tài nguyên nào bạn cần,
tập tin mẫu đã hoàn thành một nửa cấu hình sẵn
và đối tượng JavaScript món ăn đều có sẵn
trong hướng dẫn cho nhiệm vụ này.