Bây giờ chúng tôi đã kiểm tra dữ liệu ràng buộc, chúng
ta hãy sử dụng chúng để
làm việc trên các ứng dụng Angular mà chúng tôi đã sử dụng cho đến nay.
Trong phiên bản trước của ứng dụng Angular,
chúng tôi đã thực hiện trình đơn,
và sau đó chúng tôi đã có một món ăn cụ thể được hiển thị ở phía dưới.
Bây giờ, chúng tôi lý tưởng muốn cho người dùng có thể nhấp
vào bất kỳ một trong các mục trình đơn và sau đó các chi tiết sẽ được hiển thị cho người dùng.
Đây là nơi việc sử dụng dữ liệu ràng buộc sẽ giúp chúng tôi
thực hiện ứng dụng của chúng tôi để kích hoạt loại tính năng này.
Đi đến trạng thái hiện tại của ứng dụng của chúng tôi trong trình duyệt,
bây giờ chúng ta có thể thấy rằng chúng tôi có menu của chúng tôi và ở dưới cùng chúng tôi
có các chi tiết của một món ăn cụ thể được hiển thị ở đó.
Bây giờ, điều này là tốt và tốt cho một sự khởi đầu, nhưng lý tưởng,
những gì chúng tôi muốn có là nếu người dùng nhấp vào bất kỳ một trong những món ăn này,
chúng tôi muốn có thể hiển thị các chi tiết của món ăn ở dưới cùng của menu ở đây.
Vì vậy, chúng tôi muốn các chi tiết của món ăn được thay đổi
dựa trên món ăn cụ thể mà chúng tôi nhấp vào bất cứ lúc nào.
Vậy, làm thế nào để chúng ta đạt được điều này?
Vì vậy, đây là nơi việc sử dụng dữ liệu ràng buộc đến để giải cứu chúng tôi.
Đi đến ứng dụng của chúng tôi,
điều đầu tiên mà tôi sẽ làm là trong thư mục được chia sẻ,
bây giờ bạn nhận ra rằng thông tin món ăn đang được
sử dụng cả trong thành phần menu cũng như trong thành phần chi tiết món ăn.
Bây giờ, khi bạn có thông tin được chia sẻ như thế này,
nó sẽ khá thuận tiện hơn để có một nơi tập trung
mà từ đó thông tin này được cung cấp cho cả hai thành phần này.
Vì vậy, để giúp tôi làm điều đó,
những gì tôi sẽ làm là đi đến thư mục chia sẻ và sau đó tạo ra một tập tin mới,
và sau đó tôi sẽ đặt tên cho tập tin này như dĩa.
Bên trong tập tin món ăn này,
tôi sẽ tạo ra hằng số cung cấp các chi tiết của các món ăn.
Vì vậy, để làm điều đó, trước
tiên tôi sẽ nhập khẩu các món ăn,
từ lớp món ăn
mà tôi đã xác định trước đó.
Vì vậy, bây giờ, tôi có thể định nghĩa một
hằng số được gọi là các món ăn thuộc loại một mảng món ăn,
và sau đó đây là nơi tôi sẽ lưu trữ các chi tiết của tất cả các món ăn của tôi.
Bây giờ, trong phiên bản trước của ứng dụng,
chúng ta đã thấy việc sử dụng các món ăn và chúng ta thấy
mảng đối tượng JavaScript có chứa các chi tiết của các món ăn.
Bây giờ, chúng ta sẽ di chuyển tất cả nội dung đó và với một phiên bản cập nhật của nó.
Vì vậy, một phiên bản cập nhật của các món ăn
mảng đối tượng JavaScript được cung cấp cho bạn trong các hướng dẫn,
vì vậy chỉ cần đi và sao chép
toàn bộ mảng đối tượng JavaScript từ đó và sau đó chúng tôi sẽ dán nó vào vị trí ở đây.
Vì vậy, điều này trở thành vị trí trung tâm mà từ đó
các món ăn thông tin được cung cấp cho ứng dụng của bạn.
Bây giờ tôi đã cắt và dán các chi tiết của
món ăn được đưa ra trong hướng dẫn tập thể dục vào vị trí ở đây,
và vì vậy tôi có bốn món ăn dán ở đây một,
hai ba, và bốn món ăn dán ở đây,
và mỗi món ăn chứa tất nhiên
các chi tiết của món ăn cụ thể và cũng ý kiến cho món ăn.
Bây giờ cách này render các thông tin
trong mẫu chi tiết món ăn trở nên đơn giản cho bất kỳ một trong những món ăn được lựa chọn.
Bây giờ, nếu bạn quay trở lại, bạn sẽ thấy rằng có một số đường màu đỏ ở đây.
Lý do cho những đường màu đỏ này là bởi vì khi bạn nhìn vào đối tượng món ăn ở đây,
bạn sẽ thấy rằng trong đối tượng món ăn chúng ta không có một tài sản ở đó được gọi là bình luận.
Vì vậy, chúng ta cần phải tạo ra một tài sản mới gọi là
ý kiến để thêm vào món ăn đó ở đây. Vậy, làm thế nào để chúng ta làm điều đó?
Vì vậy, để làm điều đó, chúng tôi sẽ nói ý kiến và
sau đó tôi sẽ nói bình luận mảng ở đây.
Bây giờ ngay lập tức bạn nhận ra rằng không có mảng nhận xét có sẵn cho chúng tôi,
vì vậy chúng tôi cần phải tạo mảng nhận xét đó.
Vì vậy, những gì tôi sẽ làm là tôi sẽ tạo ra một lớp JavaScript có
chứa các chi tiết của bình luận ở đó.
Vì vậy, để làm điều đó, đầu tiên tôi sẽ nhập bình luận từ
lớp bình luận ở đây.
Bây giờ tất nhiên dòng màu đỏ ngay lập tức nói với tôi rằng tôi không có một lớp bình luận.
Vì vậy, làm thế nào để chúng ta thêm một lớp bình luận?
Vì vậy, đi đến thư mục chia sẻ,
chúng tôi sẽ tạo ra một tập tin mới tên comment.t và bên trong bình luận này.t này,
chúng tôi sẽ xác định một lớp được gọi là bình luận ở đây.
Bây giờ, chúng ta cần phải xác định các thuộc tính nhất định cho lớp bình luận này.
Vì vậy, những đặc tính mà chúng ta có là gì?
Chúng ta hãy xem nhanh các tập tin dishes.ds của chúng tôi
và sau đó chúng ta sẽ thấy những gì các thuộc tính cho mỗi nhận xét là.
Đi đến tập tin dishes.ds,
bạn thấy rằng các ý kiến chứa
một thuộc tính được gọi là một đánh giá mà dường như là một con số,
sau đó bạn có một nhận xét đó là một chuỗi và
tác giả đó là một chuỗi và một ngày mà cũng là một chuỗi.
Vì vậy, chúng ta cần phải xác định bốn thuộc tính cho lớp bình luận của tôi ở đây.
Vì vậy, quay trở lại lớp bình luận,
tôi sẽ xác định đánh giá là số.
Vì vậy, trong loại kịch bản,
tất cả mọi thứ là một số ở đây sau đó chúng tôi đã nhận xét đó là một chuỗi tác giả,
mà cũng là một chuỗi,
và sau đó ngày đó cũng là một chuỗi ở đây.
Vì vậy, đây là bốn đặc tính mà chúng ta có ở đây.
Bây giờ, rõ ràng chúng ta đã thấy cách chúng ta sử dụng chuỗi ngày trong bài tập trước đó,
và trong việc phân công cách chúng ta đã sử dụng
chuỗi ngày để hiển thị ngày cho nhận xét ở đó.
Bây giờ, trong trường hợp bạn đang tự
hỏi, chuỗi ngày này thực sự chứa gì?
Đi đến đây, bạn sẽ thấy rằng chuỗi ngày này là với một định dạng nhất định.
Vì vậy, đây là định dạng chuẩn để lưu trữ một ngày ở đây.
Định dạng ngày này là cách ISO OSI xác định định định dạng ngày.
Vì vậy, chúng tôi sẽ chỉ sử dụng điều này,
vì vậy đây là một định dạng tiêu chuẩn được sử dụng cũng trong
nhiều ngôn ngữ lập trình cho phép bạn lưu trữ dữ liệu như một chuỗi ở đây,
vì vậy tôi sẽ chỉ sử dụng nó như vậy ở đây.
Sau khi thực hiện các thay đổi để
các tập tin dish.tsnhư thế này ở đây và sau đó cũng thêm trong các lớp bình luận ở đây,
bây giờ chúng ta thấy rằng các tập tin dishes.tstskhông còn có những dòng màu đỏ vì
nhận xét đã được thêm vào như một mảng đối tượng để lớp món ăn của tôi ở đây.
Vì vậy, điều này hoạt động tốt cho đến nay.
Bây giờ, làm thế nào để chúng ta sử dụng nó?
Bây giờ để tận dụng điều này,
chúng tôi sẽ đi đến thành phần trình đơn,
và sau đó ở đây chúng tôi có hằng số này được xác định ở đây.
Bây giờ, đây không phải là cách đúng đắn để làm điều đó
sau này bạn sẽ thấy tôi sử dụng một dịch vụ cho tất cả những điều này.
Vì vậy, hãy để tôi cắt ra hằng số này từ đây hoàn toàn và thay vì sử dụng hằng số đó,
tôi sẽ bây giờ nhập khẩu các món ăn
từ thư mục được chia sẻ
ở đây, các món ăn được chia sẻ ở đây.
Vì vậy, lưu ý rằng thư mục món ăn này đang xuất khẩu các món ăn liên tục ở đây.
Vì vậy, đó là lý do tại sao chúng ta có thể sử dụng nó.
Vì vậy, đi trở lại với các món ăn ở đây,
tôi cần phải xuất khẩu này từ đây,
vì vậy tôi sẽ nói xuất khẩu.
Hằng số. Vì vậy, khi tôi làm điều
đó, sau đó trong thành phần menu của tôi, tôi có thể thấy rằng các món ăn của tôi có thể được nhập khẩu ở đây một cách chính xác.
Sau đó, phần còn lại của mã ở đây sẽ hoạt động tốt mà không có bất kỳ thay đổi nào.
Bạn sẽ thấy rằng nếu bạn lưu các giá trị bây giờ
và sau đó bạn nhìn vào ứng dụng web của bạn trong trình duyệt,
nó sẽ hiển thị tốt ngay cả sau khi những thay đổi này.
Sau khi lưu tất cả các thay đổi mà bạn đã thực hiện cho đến nay trong tất cả các tập tin,
nếu bạn đi và nhìn vào trang web của
bạn, trang web của bạn hiển thị giống như trước đây.
Bây giờ, phần thứ hai của vấn đề.
Chúng tôi muốn có thể giao tiếp.
Khi chúng ta nhấp vào bất kỳ một trong các mục menu này,
chúng tôi muốn có thể truyền đạt thông tin đó để
các món ăn tương ứng sẽ được hiển thị ở đây.
Vì vậy, đây là nơi chúng tôi sẽ lấy sự giúp đỡ của
các ràng buộc dữ liệu mà chúng tôi đã học được cho đến nay.
Quay trở lại tập tin mẫu thành phần menu,
những gì chúng ta sẽ làm là cho điều
này “ứng dụng-dishdetail” mà bạn bao gồm ở dưới cùng ở đây,
để thêm vào các thành phần món ăn mẫu thành phần để các thành phần menu mẫu,
chúng ta sẽ thêm vào một thuộc tính được gọi là món ăn.
Sau đó, chúng tôi sẽ gán điều này là “SelectedDish”.
Bạn sẽ nhớ lại rằng món ăn được lựa chọn là một biến mà chúng tôi đã
xác định trong các thành phần menu của chúng tôi TypesScript tập tin ở đây.
Vì vậy, theo cách đó; giá trị của món ăn được lựa chọn
sẽ được truyền qua món ăn đặc sản này ở đây.
Bây giờ, chúng ta sẽ thấy làm thế nào các thành phần chi tiết món ăn có thể lấy thông tin này
và sau đó tận dụng nó tốt trong bước tiếp theo trong bài tập.
Bây giờ, trong khi chúng tôi đang ở đây,
chúng tôi cũng sẽ khắc phục vấn đề khác mà chúng tôi cần phải giải quyết.
Đó là, khi bất kỳ mục menu nào được nhấp vào,
sau đó nó sẽ tạo ra một sự kiện nhấp chuột và chúng tôi muốn thông tin đó được
gửi đến tệp TypeScript thành phần menu của chúng tôi.
Vì vậy, để làm điều đó, chúng ta sẽ đi vào danh sách lưới menu mà chúng tôi đã xác định ở đây.
Đối với ngói lưới này ở đây,
những gì tôi sẽ làm là để xác định sự kiện nhấp chuột ở đây.
Vì vậy, cho các sự kiện click,
những gì tôi sẽ làm là tôi sẽ gọi vào
chọn phương pháp mà tôi sẽ xác định bên trong tập tin thành phần menu của tôi.
Để phương pháp onSelect này,
tôi sẽ cung cấp các món ăn như là tham số ở đây.
Món này là gì?
Món này chính xác là món ăn này mà bạn đã chọn trong
“let dish of dishes” này trong cú pháp NGFor ở đây.
Vì vậy, món ăn cụ thể đó,
ra khỏi mảng các món ăn mà bạn đã chọn ở đây,
sẽ được thông qua như một tham số cho phương pháp onSelect này,
những gì chúng ta sẽ thực hiện trong tập tin thành phần menu của chúng tôi.
Vì vậy, bây giờ mà chúng tôi đã làm điều
này, vì vậy đây là xử lý cần phải được thực hiện.
Hãy đi đến tệp thành phần menu và sau đó sửa
tệp này để thực hiện trình xử lý này trong đó.
Vì vậy, khi bạn nhấp chuột vào bất kỳ một trong các mục trình đơn,
sau đó xử lý tương ứng sẽ được gọi và
thông tin món ăn cụ thể sẽ được thông qua như một tham số ở đây.
Đi đến tập tin thành phần trình đơn, bây giờ,
món ăn đã chọn sẽ được gán một giá trị dựa trên món ăn mà tôi chọn.
Vì vậy, tôi sẽ loại bỏ phần đó và sau đó ngay dưới đây,
tôi sẽ thực hiện phương pháp onSelect ở đây.
Vì vậy, đối với phương pháp onSelect,
điều này sẽ có được một tham số đó là tham số món ăn.
Khi tham số món ăn đó đi vào,
tôi sẽ gán này được lựa chọnDish bằng món ăn,
tham số mà đi vào như là giá trị cho phương pháp onSelect ở đây.
Vì vậy, đây là nó.
Vì vậy, khi bạn nhấp vào bất kỳ một trong những mục đó trong menu,
bất kỳ một trong các món ăn trong menu,
thông tin món ăn đó sẽ được thông qua thông qua điều này và sau đó
món ăn đã chọn sẽ được gán cho đối tượng món ăn đó ở đây.
Bây giờ, chúng ta có cách thức thông tin đến từ DOM.
Nhấp chuột cụ thể sẽ làm cho thông tin món ăn
có sẵn cho chúng tôi và món ăn đã chọn sẽ được gán giá trị đó.
Bây giờ, quay trở lại tệp HTML thành phần menu,
chúng ta thấy rằng chúng ta đã gán thuộc tính món ăn này cho SelectedDish.
Vì vậy, theo cách đó, giá trị món ăn được lựa chọn đang được truyền
vào thông qua tài sản món ăn này để ứng dụng món ăn này chi tiết ở đây.
Bây giờ, làm thế nào để thành phần chi tiết món ăn của tôi nắm giữ thông tin này?
Đối với điều đó, chúng ta sẽ đi đến thành phần chi tiết món ăn và sửa chữa điều đó.
Đi đến thành phần chi tiết món ăn,
điều đầu tiên mà tôi sẽ làm là xóa
liên tục món ăn này từ thành phần chi tiết món ăn của tôi.
Tôi không còn cần nó nữa.
Bây giờ, khi một tài sản đang bị ràng buộc,
giống như những gì chúng ta đã thấy trong tập tin HTML thành phần menu,
sau đó trong tập tin chi tiết món ăn của tôi,
tôi có thể sử dụng một mô-đun gọi là Input Module.
Sau đó, đối với món ăn này,
tôi sẽ chỉ đơn giản tuyên bố rằng là DISH.
Bây giờ, mô-đun đầu vào này cho phép tôi khai báo một trang trí
cho biến món ăn này mà tôi định nghĩa ở đây,
như thế này, tại đầu vào với dấu ngoặc đơn ở đây để món ăn đó ở đây.
Sau đó, tôi cũng cần nhập
các lớp món ăn
từ món ăn chia sẻ ở đây.
Vì vậy, với điều này, vì vậy những gì đã xảy ra là tôi đang sử dụng các mô-đun đầu vào.
Vì vậy, đây là một cách để bạn cung cấp thông tin vào một thành phần từ một thành phần khác.
Bạn ràng buộc một thuộc tính trong mẫu của
các thành phần khác như chúng ta đã thấy trong menu component.html tập tin,
và sau đó sẽ có sẵn như là đầu vào cho thành phần này bằng cách
khai báo một biến và sau đó gọi trang trí đầu vào cho rằng.
Bây giờ, với điều này, chúng ta hãy lưu các thay đổi cho tất cả các tập tin mà chúng tôi đã thực hiện
và sau đó có một cái nhìn vào nhân rộng góc.
Đi đến trình duyệt của chúng
tôi, chúng ta thấy rằng trong bản sao Angular này,
không có gì đang được hiển thị ở đây.
Bởi vì ngay bây giờ, món ăn được lựa chọn,
chúng tôi đã không chọn bất kỳ một trong các món ăn như vậy cũng
là món ăn được lựa chọn là một đối tượng trống rỗng ở đó.
Vì vậy, chúng tôi sử dụng NGIf trong mẫu cho chi tiết món ăn.
Vì vậy, hãy nhìn nhanh vào mẫu chi tiết món ăn,
bạn đã thực hiện điều này như là một phần của nhiệm vụ của bạn.
Vì vậy, bạn nên sử dụng NGIf với các món ăn cho cả mã,
cũng như danh sách MD ở đó.
Vì vậy, nếu bạn làm điều đó,
sau đó khi món ăn hiện đang không được chọn,
sau đó không có gì sẽ được hiển thị ở phía dưới.
Nhưng thời điểm tôi nhấp vào bất kỳ một trong các món ăn,
sau đó bạn ngay lập tức thấy các chi tiết của món ăn được hiển thị ở dưới cùng ở đây.
Bây giờ tôi có thể chọn món ăn thứ hai và sau đó ngay lập tức,
bạn sẽ nhận thấy rằng các chi tiết món ăn được hiển thị dưới đây được thay đổi.
Vì vậy, bất cứ khi nào tôi nhấp vào bất kỳ một trong những món ăn này,
các chi tiết của món ăn cụ thể đó,
bao gồm cả các ý kiến sẽ được hiển thị ở phía dưới đây.
Vì vậy, đây chính xác là những gì chúng tôi muốn đạt được trong bài tập đặc biệt này.
Vì vậy, ở đây, bạn đã thấy việc sử dụng các dữ liệu ràng buộc, ba loại khác nhau,
bao gồm các sự kiện và xử lý sự kiện,
và bạn cũng thấy làm thế nào chúng ta có thể sử dụng các mô-đun đầu vào để có thể
truy xuất thông tin vào một thành phần đến từ một thành phần khác.
Với điều này, chúng tôi hoàn thành bài tập này,
nơi chúng tôi đã học được cách sử dụng các
tính năng ràng buộc dữ liệu khác nhau có sẵn trong Angular để thực hiện ứng dụng của chúng tôi.
Đây là thời điểm tốt để bạn thực hiện một cam kết git với liên kết dữ liệu tin nhắn.