1
00:00:00,000 --> 00:00:07,225
Bây giờ chúng tôi đã kiểm tra dữ liệu ràng buộc, chúng

2
00:00:07,225 --> 00:00:10,275
ta hãy sử dụng chúng để

3
00:00:10,275 --> 00:00:14,715
làm việc trên các ứng dụng Angular mà chúng tôi đã sử dụng cho đến nay.

4
00:00:14,715 --> 00:00:17,504
Trong phiên bản trước của ứng dụng Angular,

5
00:00:17,504 --> 00:00:20,190
chúng tôi đã thực hiện trình đơn,

6
00:00:20,190 --> 00:00:24,655
và sau đó chúng tôi đã có một món ăn cụ thể được hiển thị ở phía dưới.

7
00:00:24,655 --> 00:00:28,770
Bây giờ, chúng tôi lý tưởng muốn cho người dùng có thể nhấp

8
00:00:28,770 --> 00:00:32,990
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.

9
00:00:32,990 --> 00:00:37,325
Đây là nơi việc sử dụng dữ liệu ràng buộc sẽ giúp chúng tôi

10
00:00:37,325 --> 00:00:43,430
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.

11
00:00:43,430 --> 00:00:48,470
Đ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,

12
00:00:48,470 --> 00:00:52,040
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

13
00:00:52,040 --> 00:00:56,370
có các chi tiết của một món ăn cụ thể được hiển thị ở đó.

14
00:00:56,370 --> 00:01:01,625
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,

15
00:01:01,625 --> 00:01:06,350
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,

16
00:01:06,350 --> 00:01:12,585
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.

17
00:01:12,585 --> 00:01:17,165
Vì vậy, chúng tôi muốn các chi tiết của món ăn được thay đổi

18
00:01:17,165 --> 00:01:22,250
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.

19
00:01:22,250 --> 00:01:24,100
Vậy, làm thế nào để chúng ta đạt được điều này?

20
00:01:24,100 --> 00:01:28,355
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.

21
00:01:28,355 --> 00:01:31,735
Đi đến ứng dụng của chúng tôi,

22
00:01:31,735 --> 00:01:35,750
điều đầu tiên mà tôi sẽ làm là trong thư mục được chia sẻ,

23
00:01:35,750 --> 00:01:39,800
bây giờ bạn nhận ra rằng thông tin món ăn đang được

24
00:01:39,800 --> 00:01:45,090
sử dụng cả trong thành phần menu cũng như trong thành phần chi tiết món ăn.

25
00:01:45,090 --> 00:01:49,100
Bây giờ, khi bạn có thông tin được chia sẻ như thế này,

26
00:01:49,100 --> 00:01:53,120
nó sẽ khá thuận tiện hơn để có một nơi tập trung

27
00:01:53,120 --> 00:01:57,170
mà từ đó thông tin này được cung cấp cho cả hai thành phần này.

28
00:01:57,170 --> 00:01:58,880
Vì vậy, để giúp tôi làm điều đó,

29
00:01:58,880 --> 00:02:03,470
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,

30
00:02:03,470 --> 00:02:09,150
và sau đó tôi sẽ đặt tên cho tập tin này như dĩa.

31
00:02:09,150 --> 00:02:11,540
Bên trong tập tin món ăn này,

32
00:02:11,540 --> 00:02:16,840
tôi sẽ tạo ra hằng số cung cấp các chi tiết của các món ăn.

33
00:02:16,840 --> 00:02:17,980
Vì vậy, để làm điều đó, trước

34
00:02:17,980 --> 00:02:27,380
tiên tôi sẽ nhập khẩu các món ăn,

35
00:02:27,380 --> 00:02:34,400
từ lớp món ăn

36
00:02:34,400 --> 00:02:36,760
mà tôi đã xác định trước đó.

37
00:02:36,760 --> 00:02:40,625
Vì vậy, bây giờ, tôi có thể định nghĩa một

38
00:02:40,625 --> 00:02:48,230
hằng số được gọi là các món ăn thuộc loại một mảng món ăn,

39
00:02:48,230 --> 00:02:53,590
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.

40
00:02:53,590 --> 00:02:56,495
Bây giờ, trong phiên bản trước của ứng dụng,

41
00:02:56,495 --> 00:03:00,500
chúng ta đã thấy việc sử dụng các món ăn và chúng ta thấy

42
00:03:00,500 --> 00:03:04,610
mảng đối tượng JavaScript có chứa các chi tiết của các món ăn.

43
00:03:04,610 --> 00:03:09,830
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ó.

44
00:03:09,830 --> 00:03:12,485
Vì vậy, một phiên bản cập nhật của các món ăn

45
00:03:12,485 --> 00:03:16,520
mảng đối tượng JavaScript được cung cấp cho bạn trong các hướng dẫn,

46
00:03:16,520 --> 00:03:18,065
vì vậy chỉ cần đi và sao chép

47
00:03:18,065 --> 00:03:22,760
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.

48
00:03:22,760 --> 00:03:25,625
Vì vậy, điều này trở thành vị trí trung tâm mà từ đó

49
00:03:25,625 --> 00:03:30,215
các món ăn thông tin được cung cấp cho ứng dụng của bạn.

50
00:03:30,215 --> 00:03:34,610
Bây giờ tôi đã cắt và dán các chi tiết của

51
00:03:34,610 --> 00:03:39,770
món ăn được đưa ra trong hướng dẫn tập thể dục vào vị trí ở đây,

52
00:03:39,770 --> 00:03:43,640
và vì vậy tôi có bốn món ăn dán ở đây một,

53
00:03:43,640 --> 00:03:46,030
hai ba, và bốn món ăn dán ở đây,

54
00:03:46,030 --> 00:03:48,710
và mỗi món ăn chứa tất nhiên

55
00:03:48,710 --> 00:03:52,560
các chi tiết của món ăn cụ thể và cũng ý kiến cho món ăn.

56
00:03:52,560 --> 00:03:55,610
Bây giờ cách này render các thông tin

57
00:03:55,610 --> 00:04:02,360
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.

58
00:04:02,360 --> 00:04:09,130
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.

59
00:04:09,130 --> 00:04:16,700
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,

60
00:04:16,700 --> 00:04:23,210
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.

61
00:04:23,210 --> 00:04:26,060
Vì vậy, chúng ta cần phải tạo ra một tài sản mới gọi là

62
00:04:26,060 --> 00:04:30,480
ý kiến để thêm vào món ăn đó ở đây. Vậy, làm thế nào để chúng ta làm điều đó?

63
00:04:30,480 --> 00:04:35,060
Vì vậy, để làm điều đó, chúng tôi sẽ nói ý kiến và

64
00:04:35,060 --> 00:04:41,275
sau đó tôi sẽ nói bình luận mảng ở đây.

65
00:04:41,275 --> 00:04:47,690
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,

66
00:04:47,690 --> 00:04:50,495
vì vậy chúng tôi cần phải tạo mảng nhận xét đó.

67
00:04:50,495 --> 00:04:54,605
Vì vậy, những gì tôi sẽ làm là tôi sẽ tạo ra một lớp JavaScript có

68
00:04:54,605 --> 00:04:59,090
chứa các chi tiết của bình luận ở đó.

69
00:04:59,090 --> 00:05:17,340
Vì vậy, để làm điều đó, đầu tiên tôi sẽ nhập bình luận từ

70
00:05:17,340 --> 00:05:20,750
lớp bình luận ở đây.

71
00:05:20,750 --> 00:05:25,435
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.

72
00:05:25,435 --> 00:05:27,375
Vì vậy, làm thế nào để chúng ta thêm một lớp bình luận?

73
00:05:27,375 --> 00:05:29,500
Vì vậy, đi đến thư mục chia sẻ,

74
00:05:29,500 --> 00:05:37,940
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,

75
00:05:37,940 --> 00:05:48,250
chúng tôi sẽ xác định một lớp được gọi là bình luận ở đây.

76
00:05:50,300 --> 00:05:55,695
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.

77
00:05:55,695 --> 00:05:57,605
Vì vậy, những đặc tính mà chúng ta có là gì?

78
00:05:57,605 --> 00:06:00,890
Chúng ta hãy xem nhanh các tập tin dishes.ds của chúng tôi

79
00:06:00,890 --> 00:06:05,310
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à.

80
00:06:06,170 --> 00:06:09,085
Đi đến tập tin dishes.ds,

81
00:06:09,085 --> 00:06:11,555
bạn thấy rằng các ý kiến chứa

82
00:06:11,555 --> 00:06:15,470
một thuộc tính được gọi là một đánh giá mà dường như là một con số,

83
00:06:15,470 --> 00:06:18,110
sau đó bạn có một nhận xét đó là một chuỗi và

84
00:06:18,110 --> 00:06:21,490
tác giả đó là một chuỗi và một ngày mà cũng là một chuỗi.

85
00:06:21,490 --> 00:06:26,690
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.

86
00:06:26,690 --> 00:06:30,075
Vì vậy, quay trở lại lớp bình luận,

87
00:06:30,075 --> 00:06:34,770
tôi sẽ xác định đánh giá là số.

88
00:06:34,770 --> 00:06:37,410
Vì vậy, trong loại kịch bản,

89
00:06:37,410 --> 00:06:47,575
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ả,

90
00:06:47,575 --> 00:06:49,480
mà cũng là một chuỗi,

91
00:06:49,480 --> 00:06:56,500
và sau đó ngày đó cũng là một chuỗi ở đây.

92
00:06:56,500 --> 00:07:01,130
Vì vậy, đây là bốn đặc tính mà chúng ta có ở đây.

93
00:07:01,130 --> 00:07:09,620
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 đó,

94
00:07:09,620 --> 00:07:13,040
và trong việc phân công cách chúng ta đã sử dụng

95
00:07:13,040 --> 00:07:17,410
chuỗi ngày để hiển thị ngày cho nhận xét ở đó.

96
00:07:17,410 --> 00:07:19,755
Bây giờ, trong trường hợp bạn đang tự

97
00:07:19,755 --> 00:07:22,540
hỏi, chuỗi ngày này thực sự chứa gì?

98
00:07:22,540 --> 00:07:28,260
Đ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.

99
00:07:28,260 --> 00:07:32,165
Vì vậy, đây là định dạng chuẩn để lưu trữ một ngày ở đây.

100
00:07:32,165 --> 00:07:38,230
Định dạng ngày này là cách ISO OSI xác định định định dạng ngày.

101
00:07:38,230 --> 00:07:39,775
Vì vậy, chúng tôi sẽ chỉ sử dụng điều này,

102
00:07:39,775 --> 00:07:42,670
vì vậy đây là một định dạng tiêu chuẩn được sử dụng cũng trong

103
00:07:42,670 --> 00:07:48,430
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,

104
00:07:48,430 --> 00:07:51,500
vì vậy tôi sẽ chỉ sử dụng nó như vậy ở đây.

105
00:07:51,500 --> 00:07:55,405
Sau khi thực hiện các thay đổi để

106
00:07:55,405 --> 00:08:02,230
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,

107
00:08:02,230 --> 00:08:08,420
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ì

108
00:08:08,420 --> 00:08:18,325
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.

109
00:08:18,325 --> 00:08:22,470
Vì vậy, điều này hoạt động tốt cho đến nay.

110
00:08:22,470 --> 00:08:24,530
Bây giờ, làm thế nào để chúng ta sử dụng nó?

111
00:08:24,530 --> 00:08:25,935
Bây giờ để tận dụng điều này,

112
00:08:25,935 --> 00:08:28,755
chúng tôi sẽ đi đến thành phần trình đơn,

113
00:08:28,755 --> 00:08:32,050
và sau đó ở đây chúng tôi có hằng số này được xác định ở đây.

114
00:08:32,050 --> 00:08:34,760
Bây giờ, đây không phải là cách đúng đắn để làm điều đó

115
00:08:34,760 --> 00:08:38,845
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.

116
00:08:38,845 --> 00:08:49,075
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ố đó,

117
00:08:49,075 --> 00:08:54,880
tôi sẽ bây giờ nhập khẩu các món ăn

118
00:08:54,880 --> 00:09:01,600
từ thư mục được chia sẻ

119
00:09:01,600 --> 00:09:07,225
ở đây, các món ăn được chia sẻ ở đây.

120
00:09:07,225 --> 00:09:12,875
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.

121
00:09:12,875 --> 00:09:17,250
Vì vậy, đó là lý do tại sao chúng ta có thể sử dụng nó.

122
00:09:17,250 --> 00:09:20,080
Vì vậy, đi trở lại với các món ăn ở đây,

123
00:09:20,080 --> 00:09:22,600
tôi cần phải xuất khẩu này từ đây,

124
00:09:22,600 --> 00:09:25,500
vì vậy tôi sẽ nói xuất khẩu.

125
00:09:25,500 --> 00:09:28,285
Hằng số. Vì vậy, khi tôi làm điều

126
00:09:28,285 --> 00:09:33,985
đó, 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.

127
00:09:33,985 --> 00:09:40,150
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.

128
00:09:40,500 --> 00:09:46,190
Bạn sẽ thấy rằng nếu bạn lưu các giá trị bây giờ

129
00:09:46,190 --> 00:09:51,190
và sau đó bạn nhìn vào ứng dụng web của bạn trong trình duyệt,

130
00:09:51,190 --> 00:09:55,655
nó sẽ hiển thị tốt ngay cả sau khi những thay đổi này.

131
00:09:55,655 --> 00:10:00,110
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,

132
00:10:00,110 --> 00:10:01,810
nếu bạn đi và nhìn vào trang web của

133
00:10:01,810 --> 00:10:05,360
bạn, trang web của bạn hiển thị giống như trước đây.

134
00:10:05,360 --> 00:10:09,025
Bây giờ, phần thứ hai của vấn đề.

135
00:10:09,025 --> 00:10:11,390
Chúng tôi muốn có thể giao tiếp.

136
00:10:11,390 --> 00:10:15,640
Khi chúng ta nhấp vào bất kỳ một trong các mục menu này,

137
00:10:15,640 --> 00:10:18,415
chúng tôi muốn có thể truyền đạt thông tin đó để

138
00:10:18,415 --> 00:10:21,640
các món ăn tương ứng sẽ được hiển thị ở đây.

139
00:10:21,640 --> 00:10:23,620
Vì vậy, đây là nơi chúng tôi sẽ lấy sự giúp đỡ của

140
00:10:23,620 --> 00:10:27,100
các ràng buộc dữ liệu mà chúng tôi đã học được cho đến nay.

141
00:10:27,100 --> 00:10:33,505
Quay trở lại tập tin mẫu thành phần menu,

142
00:10:33,505 --> 00:10:36,600
những gì chúng ta sẽ làm là cho điều

143
00:10:36,600 --> 00:10:41,675
này “ứng dụng-dishdetail” mà bạn bao gồm ở dưới cùng ở đây,

144
00:10:41,675 --> 00:10:48,570
để 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,

145
00:10:48,570 --> 00:10:53,440
chúng ta sẽ thêm vào một thuộc tính được gọi là món ăn.

146
00:10:53,440 --> 00:10:59,520
Sau đó, chúng tôi sẽ gán điều này là “SelectedDish”.

147
00:10:59,520 --> 00:11:03,550
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 đã

148
00:11:03,550 --> 00:11:08,385
xác định trong các thành phần menu của chúng tôi TypesScript tập tin ở đây.

149
00:11:08,385 --> 00:11:12,020
Vì vậy, theo cách đó; giá trị của món ăn được lựa chọn

150
00:11:12,020 --> 00:11:15,905
sẽ được truyền qua món ăn đặc sản này ở đây.

151
00:11:15,905 --> 00:11:20,860
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

152
00:11:20,860 --> 00:11:25,670
và sau đó tận dụng nó tốt trong bước tiếp theo trong bài tập.

153
00:11:25,670 --> 00:11:27,655
Bây giờ, trong khi chúng tôi đang ở đây,

154
00:11:27,655 --> 00:11:33,345
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.

155
00:11:33,345 --> 00:11:40,155
Đó là, khi bất kỳ mục menu nào được nhấp vào,

156
00:11:40,155 --> 00:11:44,215
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

157
00:11:44,215 --> 00:11:49,475
gửi đến tệp TypeScript thành phần menu của chúng tôi.

158
00:11:49,475 --> 00:11:56,960
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.

159
00:11:56,960 --> 00:11:59,395
Đối với ngói lưới này ở đây,

160
00:11:59,395 --> 00:12:04,945
những gì tôi sẽ làm là để xác định sự kiện nhấp chuột ở đây.

161
00:12:04,945 --> 00:12:06,910
Vì vậy, cho các sự kiện click,

162
00:12:06,910 --> 00:12:11,870
những gì tôi sẽ làm là tôi sẽ gọi vào

163
00:12:11,870 --> 00:12:19,005
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.

164
00:12:19,005 --> 00:12:20,880
Để phương pháp onSelect này,

165
00:12:20,880 --> 00:12:25,975
tôi sẽ cung cấp các món ăn như là tham số ở đây.

166
00:12:25,975 --> 00:12:27,315
Món này là gì?

167
00:12:27,315 --> 00:12:30,670
Món này chính xác là món ăn này mà bạn đã chọn trong

168
00:12:30,670 --> 00:12:35,785
“let dish of dishes” này trong cú pháp NGFor ở đây.

169
00:12:35,785 --> 00:12:38,290
Vì vậy, món ăn cụ thể đó,

170
00:12:38,290 --> 00:12:41,390
ra khỏi mảng các món ăn mà bạn đã chọn ở đây,

171
00:12:41,390 --> 00:12:45,980
sẽ được thông qua như một tham số cho phương pháp onSelect này,

172
00:12:45,980 --> 00:12:50,555
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.

173
00:12:50,555 --> 00:12:52,465
Vì vậy, bây giờ mà chúng tôi đã làm điều

174
00:12:52,465 --> 00:12:56,175
này, vì vậy đây là xử lý cần phải được thực hiện.

175
00:12:56,175 --> 00:12:59,960
Hãy đi đến tệp thành phần menu và sau đó sửa

176
00:12:59,960 --> 00:13:04,195
tệp này để thực hiện trình xử lý này trong đó.

177
00:13:04,195 --> 00:13:08,490
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,

178
00:13:08,490 --> 00:13:10,695
sau đó xử lý tương ứng sẽ được gọi và

179
00:13:10,695 --> 00:13:15,605
thông tin món ăn cụ thể sẽ được thông qua như một tham số ở đây.

180
00:13:15,605 --> 00:13:19,790
Đi đến tập tin thành phần trình đơn, bây giờ,

181
00:13:19,790 --> 00:13:25,545
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.

182
00:13:25,545 --> 00:13:29,600
Vì vậy, tôi sẽ loại bỏ phần đó và sau đó ngay dưới đây,

183
00:13:29,600 --> 00:13:34,660
tôi sẽ thực hiện phương pháp onSelect ở đây.

184
00:13:34,660 --> 00:13:37,715
Vì vậy, đối với phương pháp onSelect,

185
00:13:37,715 --> 00:13:45,525
điều này sẽ có được một tham số đó là tham số món ăn.

186
00:13:45,525 --> 00:13:47,820
Khi tham số món ăn đó đi vào,

187
00:13:47,820 --> 00:13:55,705
tôi sẽ gán này được lựa chọnDish bằng món ăn,

188
00:13:55,705 --> 00:14:02,420
tham số mà đi vào như là giá trị cho phương pháp onSelect ở đây.

189
00:14:02,420 --> 00:14:03,895
Vì vậy, đây là nó.

190
00:14:03,895 --> 00:14:08,410
Vì vậy, khi bạn nhấp vào bất kỳ một trong những mục đó trong menu,

191
00:14:08,410 --> 00:14:10,780
bất kỳ một trong các món ăn trong menu,

192
00:14:10,780 --> 00:14:15,090
thông tin món ăn đó sẽ được thông qua thông qua điều này và sau đó

193
00:14:15,090 --> 00:14:20,670
món ăn đã chọn sẽ được gán cho đối tượng món ăn đó ở đây.

194
00:14:20,670 --> 00:14:25,415
Bây giờ, chúng ta có cách thức thông tin đến từ DOM.

195
00:14:25,415 --> 00:14:29,280
Nhấp chuột cụ thể sẽ làm cho thông tin món ăn

196
00:14:29,280 --> 00:14:33,875
có sẵn cho chúng tôi và món ăn đã chọn sẽ được gán giá trị đó.

197
00:14:33,875 --> 00:14:38,755
Bây giờ, quay trở lại tệp HTML thành phần menu,

198
00:14:38,755 --> 00:14:45,240
chúng ta thấy rằng chúng ta đã gán thuộc tính món ăn này cho SelectedDish.

199
00:14:45,240 --> 00:14:48,730
Vì vậy, theo cách đó, giá trị món ăn được lựa chọn đang được truyền

200
00:14:48,730 --> 00:14:53,980
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.

201
00:14:53,980 --> 00:14:57,990
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?

202
00:14:57,990 --> 00:15:02,225
Đố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 đó.

203
00:15:02,225 --> 00:15:05,185
Đi đến thành phần chi tiết món ăn,

204
00:15:05,185 --> 00:15:08,395
điều đầu tiên mà tôi sẽ làm là xóa

205
00:15:08,395 --> 00:15:13,370
liên tục món ăn này từ thành phần chi tiết món ăn của tôi.

206
00:15:13,370 --> 00:15:14,985
Tôi không còn cần nó nữa.

207
00:15:14,985 --> 00:15:18,490
Bây giờ, khi một tài sản đang bị ràng buộc,

208
00:15:18,490 --> 00:15:22,715
giống như những gì chúng ta đã thấy trong tập tin HTML thành phần menu,

209
00:15:22,715 --> 00:15:25,900
sau đó trong tập tin chi tiết món ăn của tôi,

210
00:15:25,900 --> 00:15:32,035
tôi có thể sử dụng một mô-đun gọi là Input Module.

211
00:15:32,035 --> 00:15:35,505
Sau đó, đối với món ăn này,

212
00:15:35,505 --> 00:15:39,555
tôi sẽ chỉ đơn giản tuyên bố rằng là DISH.

213
00:15:39,555 --> 00:15:45,095
Bây giờ, mô-đun đầu vào này cho phép tôi khai báo một trang trí

214
00:15:45,095 --> 00:15:50,905
cho biến món ăn này mà tôi định nghĩa ở đây,

215
00:15:50,905 --> 00:15:57,800
như thế này, tại đầu vào với dấu ngoặc đơn ở đây để món ăn đó ở đây.

216
00:15:57,800 --> 00:16:01,025
Sau đó, tôi cũng cần nhập

217
00:16:01,025 --> 00:16:10,010
các lớp món ăn

218
00:16:10,010 --> 00:16:18,975
từ món ăn chia sẻ ở đây.

219
00:16:18,975 --> 00:16:24,610
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.

220
00:16:24,610 --> 00:16:30,655
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.

221
00:16:30,655 --> 00:16:33,650
Bạn ràng buộc một thuộc tính trong mẫu của

222
00:16:33,650 --> 00:16:37,460
các thành phần khác như chúng ta đã thấy trong menu component.html tập tin,

223
00:16:37,460 --> 00:16:41,550
và sau đó sẽ có sẵn như là đầu vào cho thành phần này bằng cách

224
00:16:41,550 --> 00:16:47,070
khai báo một biến và sau đó gọi trang trí đầu vào cho rằng.

225
00:16:47,070 --> 00:16:51,400
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

226
00:16:51,400 --> 00:16:56,990
và sau đó có một cái nhìn vào nhân rộng góc.

227
00:16:56,990 --> 00:17:00,140
Đi đến trình duyệt của chúng

228
00:17:00,140 --> 00:17:02,260
tôi, chúng ta thấy rằng trong bản sao Angular này,

229
00:17:02,260 --> 00:17:04,000
không có gì đang được hiển thị ở đây.

230
00:17:04,000 --> 00:17:07,470
Bởi vì ngay bây giờ, món ăn được lựa chọn,

231
00:17:07,470 --> 00:17:11,120
chúng tôi đã không chọn bất kỳ một trong các món ăn như vậy cũng

232
00:17:11,120 --> 00:17:14,985
là món ăn được lựa chọn là một đối tượng trống rỗng ở đó.

233
00:17:14,985 --> 00:17:23,050
Vì vậy, chúng tôi sử dụng NGIf trong mẫu cho chi tiết món ăn.

234
00:17:23,050 --> 00:17:27,765
Vì vậy, hãy nhìn nhanh vào mẫu chi tiết món ăn,

235
00:17:27,765 --> 00:17:31,810
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.

236
00:17:31,810 --> 00:17:38,315
Vì vậy, bạn nên sử dụng NGIf với các món ăn cho cả mã,

237
00:17:38,315 --> 00:17:41,400
cũng như danh sách MD ở đó.

238
00:17:41,400 --> 00:17:44,125
Vì vậy, nếu bạn làm điều đó,

239
00:17:44,125 --> 00:17:47,705
sau đó khi món ăn hiện đang không được chọn,

240
00:17:47,705 --> 00:17:50,175
sau đó không có gì sẽ được hiển thị ở phía dưới.

241
00:17:50,175 --> 00:17:53,255
Nhưng thời điểm tôi nhấp vào bất kỳ một trong các món ăn,

242
00:17:53,255 --> 00:17:58,005
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.

243
00:17:58,005 --> 00:18:00,840
Bây giờ tôi có thể chọn món ăn thứ hai và sau đó ngay lập tức,

244
00:18:00,840 --> 00:18:06,000
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.

245
00:18:06,000 --> 00:18:09,090
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,

246
00:18:09,090 --> 00:18:11,505
các chi tiết của món ăn cụ thể đó,

247
00:18:11,505 --> 00:18:15,670
bao gồm cả các ý kiến sẽ được hiển thị ở phía dưới đây.

248
00:18:15,670 --> 00:18:20,710
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.

249
00:18:20,710 --> 00:18:27,855
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,

250
00:18:27,855 --> 00:18:31,970
bao gồm các sự kiện và xử lý sự kiện,

251
00:18:31,970 --> 00:18:37,110
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ể

252
00:18:37,110 --> 00:18:42,855
truy xuất thông tin vào một thành phần đến từ một thành phần khác.

253
00:18:42,855 --> 00:18:45,820
Với điều này, chúng tôi hoàn thành bài tập này,

254
00:18:45,820 --> 00:18:48,750
nơi chúng tôi đã học được cách sử dụng các

255
00:18:48,750 --> 00:18:56,005
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.

256
00:18:56,005 --> 00:19:02,010
Đâ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.