1
00:00:03,680 --> 00:00:07,095
Bây giờ chúng ta hãy tiếp tục làm việc trên

2
00:00:07,095 --> 00:00:12,080
ứng dụng trang duy nhất mà chúng tôi đã phát triển trong các bài tập của chúng tôi.

3
00:00:12,080 --> 00:00:16,480
Cho đến nay, chúng tôi đã tích hợp thành phần nhà,

4
00:00:16,480 --> 00:00:23,610
thành phần menu và thành phần liên lạc vào ứng dụng trang đơn của chúng tôi.

5
00:00:23,610 --> 00:00:29,080
Thành phần chi tiết món ăn hiện đang được sử dụng ở dưới cùng của thành phần menu.

6
00:00:29,080 --> 00:00:32,020
Vì vậy, khi bạn nhấp vào bất kỳ mục nào trong menu,

7
00:00:32,020 --> 00:00:35,450
các chi tiết của món ăn được hiển thị ngay bên dưới trong menu.

8
00:00:35,450 --> 00:00:40,290
Bây giờ, chúng ta sẽ tận dụng một hỗ trợ khác mà mô-đun bộ định tuyến Angular cung cấp,

9
00:00:40,290 --> 00:00:47,820
cho phép chúng ta xác định một tuyến đường với một tham số được bao gồm trong định nghĩa tuyến đường.

10
00:00:47,820 --> 00:00:52,520
Bằng cách này, chúng ta có thể truyền thông tin cho một thành phần khác,

11
00:00:52,520 --> 00:00:53,880
và sau đó từ đó,

12
00:00:53,880 --> 00:00:56,175
hiển thị thông tin trong thành phần khác.

13
00:00:56,175 --> 00:00:57,770
Làm thế nào để làm việc này?

14
00:00:57,770 --> 00:01:01,770
Hãy học điều đó bằng cách thực hiện bài tập này.

15
00:01:01,770 --> 00:01:04,755
Vì vậy, quay lại ứng dụng của chúng tôi,

16
00:01:04,755 --> 00:01:08,140
trong ứng dụng này, khi bạn nhìn vào menu,

17
00:01:08,140 --> 00:01:10,205
khi bạn nhấp vào bất kỳ mục nào trong menu,

18
00:01:10,205 --> 00:01:15,920
các chi tiết của mục đã chọn được hiển thị ngay bên dưới trong menu.

19
00:01:15,920 --> 00:01:19,940
Bây giờ, tôi muốn tách quan điểm của các chi tiết

20
00:01:19,940 --> 00:01:24,795
của món ăn đặc biệt này thành một cái nhìn riêng biệt của nó.

21
00:01:24,795 --> 00:01:27,235
Khi tôi nhấp vào bất kỳ một trong số này,

22
00:01:27,235 --> 00:01:30,360
tôi muốn có thể hiển thị các chi tiết của món ăn,

23
00:01:30,360 --> 00:01:34,780
đặc biệt trong một cái nhìn trong ứng dụng này.

24
00:01:34,780 --> 00:01:39,235
Để đạt được điều đó, chúng tôi sẽ tận dụng lợi thế, như tôi đã nói,

25
00:01:39,235 --> 00:01:43,985
với các thông số tuyến đường để cho phép

26
00:01:43,985 --> 00:01:48,220
chúng tôi hỗ trợ loại hành vi đó trong ứng dụng của chúng tôi.

27
00:01:48,220 --> 00:01:50,050
Làm thế nào để chúng ta làm điều đó?

28
00:01:50,050 --> 00:01:57,025
Hãy làm điều đó bằng cách bắt đầu với việc xác định một tuyến đường mới với một tham số ở đây.

29
00:01:57,025 --> 00:02:00,305
Để sử dụng thành phần chi tiết món ăn,

30
00:02:00,305 --> 00:02:02,455
chúng tôi sẽ đi vào các tuyến đường,

31
00:02:02,455 --> 00:02:06,850
và sau đó xác định một tuyến đường mới sau khi thực đơn ở đây.

32
00:02:06,850 --> 00:02:10,010
Nhìn vào cách tuyến đường được định nghĩa ở đây.

33
00:02:10,010 --> 00:02:16,595
Vì vậy, đây là con đường, chi tiết bí ẩn.

34
00:02:16,595 --> 00:02:20,225
Vì vậy, chi tiết món ăn này là một phần của thành phần chi tiết món ăn.

35
00:02:20,225 --> 00:02:22,190
Vì vậy, nó có quan điểm riêng của nó.

36
00:02:22,190 --> 00:02:25,330
Bây giờ, tôi muốn có thể điều hướng đến chế độ xem đó,

37
00:02:25,330 --> 00:02:27,890
nhưng với một ID tham số,

38
00:02:27,890 --> 00:02:33,750
bởi vì chế độ xem chi tiết món ăn này có thể hiển thị bất kỳ một trong các món ăn trong menu của tôi.

39
00:02:33,750 --> 00:02:38,790
Vì vậy, tôi muốn có thể hiển thị một món ăn được lựa chọn trong chi tiết món ăn.

40
00:02:38,790 --> 00:02:40,710
Bây giờ, đó là món ăn được chọn sẽ có một ID,

41
00:02:40,710 --> 00:02:45,879
và tôi muốn chuyển ID đó vào các thành phần chi tiết món ăn của tôi,

42
00:02:45,879 --> 00:02:50,025
để nó có thể hiển thị các chi tiết của món ăn cụ thể đó.

43
00:02:50,025 --> 00:02:53,480
Vì vậy, trong bộ định tuyến Angular,

44
00:02:53,480 --> 00:02:59,150
nó hỗ trợ đi qua các tham số bằng cách xác định các thông số tuyến đường như thế này,

45
00:02:59,150 --> 00:03:02,220
trong định nghĩa của chính bộ định tuyến.

46
00:03:02,220 --> 00:03:03,260
Vì vậy, trong đường dẫn,

47
00:03:03,260 --> 00:03:04,525
nếu tôi nói dấu hai chấm,

48
00:03:04,525 --> 00:03:10,050
do đó dấu hai chấm có thể được theo sau bởi một tên mà sẽ hoạt động như một tham số tuyến đường.

49
00:03:10,050 --> 00:03:14,650
Vì vậy, trong trường hợp này, tôi sẽ sử dụng tên tham số như một ID.

50
00:03:14,650 --> 00:03:21,165
ID này đề cập đến ID món ăn mà chúng tôi đã cung cấp cho mỗi món ăn của chúng tôi.

51
00:03:21,165 --> 00:03:27,055
Bây giờ, điều này sẽ đưa tôi đến thành phần chi tiết món ăn.

52
00:03:27,055 --> 00:03:35,040
Vì vậy, chúng ta sẽ thêm vào tuyến đường mới này để định nghĩa tuyến đường Angular của chúng tôi ở đây.

53
00:03:35,040 --> 00:03:36,565
Lưu các thay đổi.

54
00:03:36,565 --> 00:03:39,960
Bây giờ, trong thành phần menu,

55
00:03:39,960 --> 00:03:45,805
vì vậy khi tôi mở tập tin mẫu thành phần menu,

56
00:03:45,805 --> 00:03:47,470
trong thành phần menu,

57
00:03:47,470 --> 00:03:50,350
tôi hiển thị các món ăn ở dưới cùng ở đây.

58
00:03:50,350 --> 00:03:51,625
Vì vậy, tôi không muốn làm điều đó.

59
00:03:51,625 --> 00:03:57,335
Vì vậy, tôi sẽ xóa phần đó từ mẫu thành phần menu của tôi.

60
00:03:57,335 --> 00:04:01,630
Thay vào đó, những gì tôi nhận ra là ngay tại đó,

61
00:04:01,630 --> 00:04:05,015
tôi có thể truy cập vào món ăn đặc biệt.

62
00:04:05,015 --> 00:04:07,680
Vì vậy, khi các món ăn được nhấp

63
00:04:07,680 --> 00:04:10,080
vào, thay vì làm điều này nhấp chuột ở đây, vì

64
00:04:10,080 --> 00:04:13,490
vậy tôi sẽ loại bỏ nhấp chuột này ở đây, và thay vào đó,

65
00:04:13,490 --> 00:04:23,940
tôi sẽ xác định một tham số mới ở đây được gọi là một RouterLink.

66
00:04:25,790 --> 00:04:30,710
Bạn sẽ thấy việc sử dụng RouterLink ở đây.

67
00:04:30,710 --> 00:04:37,460
Bây giờ, RouterLink này có trong các giá trị mà bạn có thể cung cấp trong mẫu của bạn như thế này.

68
00:04:37,460 --> 00:04:42,190
Vì vậy, bạn có thể cung cấp đó như là một mảng ở đây.

69
00:04:42,190 --> 00:04:49,550
Trong mảng, bạn có thể cung cấp hai phần của một mảng.

70
00:04:49,550 --> 00:04:51,195
Vì vậy, chi tiết về món ăn.

71
00:04:51,195 --> 00:04:55,360
Vì vậy, bạn thấy rằng khi tôi xác định tuyến đường, tôi nói “/dishdetail/:id”.

72
00:04:56,560 --> 00:05:03,320
Vì vậy, bộ định tuyến Angular sẽ vượt qua bất kỳ tham số mà tôi cung cấp

73
00:05:03,320 --> 00:05:09,340
ở đây như là một phần của phần thứ hai của URL đó ở đó.

74
00:05:09,340 --> 00:05:11,700
Vì vậy, bây giờ, cùng với các chi tiết món ăn,

75
00:05:11,700 --> 00:05:15,820
tôi sẽ xây dựng RouterLink của tôi bằng cách sử dụng chi tiết món ăn,

76
00:05:15,820 --> 00:05:19,165
và cũng là ID món ăn ở đây.

77
00:05:19,165 --> 00:05:22,580
Vì vậy, ID món ăn này đề cập đến món ăn cụ thể mà tôi đã

78
00:05:22,580 --> 00:05:26,710
chọn từ mảng các món ăn ở đây.

79
00:05:26,710 --> 00:05:27,950
Vì vậy, ID món ăn đó,

80
00:05:27,950 --> 00:05:29,830
tôi có quyền truy cập vào nó ở đây.

81
00:05:29,830 --> 00:05:38,120
Vì vậy, tôi sẽ sử dụng đó như là phần thứ hai bên trong mảng này của các thông số,

82
00:05:38,120 --> 00:05:41,025
mà tôi sẽ vượt qua trong cho RouterLink của tôi ở đây.

83
00:05:41,025 --> 00:05:42,970
Vì vậy, nếu tôi định nghĩa nó như thế này,

84
00:05:42,970 --> 00:05:48,270
sau đó khi tôi nhấp vào mục cụ thể đó trong menu của tôi,

85
00:05:48,270 --> 00:05:51,030
sau đó chi tiết, ID món ăn,

86
00:05:51,030 --> 00:05:53,385
cùng với dishdetail này,

87
00:05:53,385 --> 00:05:55,285
sẽ được thông qua như là liên kết router.

88
00:05:55,285 --> 00:05:59,765
Vì vậy, thông tin đó bây giờ sẽ trở nên có sẵn thông qua

89
00:05:59,765 --> 00:06:04,600
bộ định tuyến Angular của tôi để các thành phần chi tiết món ăn của tôi.

90
00:06:04,600 --> 00:06:09,850
Vì vậy, bộ định tuyến cho phép thành phần chi tiết món ăn để lấy giá trị này,

91
00:06:09,850 --> 00:06:15,060
ID món ăn, từ tuyến đường Angular khi thông tin này được truyền vào nó.

92
00:06:15,060 --> 00:06:16,880
Làm thế nào để chúng ta làm được điều đó? Đối với điều đó,

93
00:06:16,880 --> 00:06:22,670
chúng ta cần phải đi đến thành phần chi tiết món ăn và sửa chữa nó lên để nhận được thông tin này.

94
00:06:22,670 --> 00:06:27,945
Vì vậy, sau khi thực hiện những thay đổi này đối với thành phần menu,

95
00:06:27,945 --> 00:06:34,090
bây giờ chúng ta hãy chuyển sang thành phần chi tiết món ăn.

96
00:06:34,300 --> 00:06:37,610
Bên trong thành phần chi tiết món ăn,

97
00:06:37,610 --> 00:06:39,950
bạn thấy rằng hiện tại,

98
00:06:39,950 --> 00:06:43,670
tôi đã nhận được món ăn như một đầu vào ở đây.

99
00:06:43,670 --> 00:06:46,655
Tôi sẽ không còn nhận được các món ăn và đầu vào nữa.

100
00:06:46,655 --> 00:06:50,295
Vì vậy, tôi sẽ chỉ để lại điều đó như vậy,

101
00:06:50,295 --> 00:06:51,910
như đơn giản là một món ăn.

102
00:06:51,910 --> 00:06:58,220
Tôi không còn cần đầu vào bởi vì tôi không đi qua thông tin này bằng cách sử dụng các món ăn,

103
00:06:58,220 --> 00:07:01,625
trong dấu ngoặc vuông mà tôi bao gồm trong thành phần menu của tôi.

104
00:07:01,625 --> 00:07:07,550
Thay vào đó, thông tin này về các món ăn cụ thể đến thông qua bộ định tuyến Angular.

105
00:07:07,550 --> 00:07:11,595
Làm thế nào để tôi có thể truy cập vào ID món ăn đó?

106
00:07:11,595 --> 00:07:13,050
Vì vậy, để làm điều đó,

107
00:07:13,050 --> 00:07:14,870
tôi đi vào đây. Vào

108
00:07:14,870 --> 00:07:24,720
ứng dụng này, tôi sẽ thêm vào hai nhập khẩu nữa ở đây,

109
00:07:24,720 --> 00:07:27,480
một trong số họ được gọi là Params.

110
00:07:27,480 --> 00:07:30,560
Vì vậy, Params này cho phép tôi truy cập vào

111
00:07:30,560 --> 00:07:35,315
các thông số router có sẵn khi tôi đi vào.

112
00:07:35,315 --> 00:07:42,855
Vì vậy, đây là từ bộ định tuyến Angular, Params,

113
00:07:42,855 --> 00:07:51,510
và cũng là một trong những khác mà tôi cần là Vị trí.

114
00:07:51,510 --> 00:07:57,710
Vị trí cho phép tôi theo dõi vị trí của

115
00:07:57,710 --> 00:08:04,060
trang của tôi trong lịch sử trình duyệt của tôi.

116
00:08:04,060 --> 00:08:11,185
Vì vậy, điều đó sẽ hữu ích cho tôi để điều hướng trở lại từ chi tiết món ăn của tôi khi tôi cần.

117
00:08:11,185 --> 00:08:14,440
Bạn sẽ thấy tôi sử dụng nó một chút sau.

118
00:08:14,440 --> 00:08:19,255
Vì vậy, hai điều mà tôi cần phải nhập: Params và Location.

119
00:08:19,255 --> 00:08:23,799
Chúng ta sẽ thấy làm thế nào chúng ta sử dụng hai trong ứng dụng của chúng tôi.

120
00:08:23,799 --> 00:08:25,430
Vì vậy, cùng với điều này,

121
00:08:25,430 --> 00:08:29,420
chúng tôi sẽ đi vào và ở đây, cho các nhà xây dựng,

122
00:08:29,420 --> 00:08:39,320
bây giờ chúng tôi lưu ý rằng giá trị món ăn bây giờ không có sẵn từ thành phần menu của tôi.

123
00:08:39,320 --> 00:08:43,650
Nhưng thay vào đó, tôi phải rõ ràng đi và lấy điều này từ DishService.

124
00:08:43,650 --> 00:08:45,405
Vì vậy, tôi sẽ nhập khẩu D

125
00:08:45,405 --> 00:08:56,020
ishService cũng vào thành phần chi tiết món ăn của tôi.

126
00:09:01,330 --> 00:09:03,960
DishService ở đây.

127
00:09:03,960 --> 00:09:09,820
Vì vậy, điều này sẽ cho phép tôi đi và lấy một món ăn cụ thể từ Dish Service.

128
00:09:09,820 --> 00:09:11,930
Vì vậy, bạn nhớ lại rằng chúng tôi đã có

129
00:09:11,930 --> 00:09:15,855
phương pháp GetDish và Dịch vụ Dish mà chúng tôi có thể sử dụng.

130
00:09:15,855 --> 00:09:20,320
Bây giờ, điều quan trọng tiếp theo đối với chúng ta là nắm giữ ID món ăn

131
00:09:20,320 --> 00:09:22,800
Bây giờ, làm thế nào để giữ ID món ăn

132
00:09:22,800 --> 00:09:25,665
Vì vậy, đây là nơi trong nhà xây dựng.

133
00:09:25,665 --> 00:09:29,075
Bây giờ, tôi cần phải làm cho tất cả các dịch vụ này có sẵn,

134
00:09:29,075 --> 00:09:31,230
vì vậy tôi sẽ nói Dish Service.

135
00:09:31,230 --> 00:09:46,250
Sau đó, một trong những khác là Location.

136
00:09:46,270 --> 00:09:51,275
Vì vậy, vị trí là một dịch vụ mà có sẵn cho tôi.

137
00:09:51,275 --> 00:09:56,010
Vì vậy, cả hai sẽ được sử dụng trong ứng dụng của tôi.

138
00:09:56,010 --> 00:09:59,325
Vì vậy, khi thành phần món ăn này được khởi tạo,

139
00:09:59,325 --> 00:10:01,890
sau đó tại thời điểm này trong NgonInit,

140
00:10:01,890 --> 00:10:08,490
tôi có thể đi và lấy thông tin về món ăn cụ thể từ Params.

141
00:10:08,490 --> 00:10:13,120
Vậy, làm thế nào để chúng ta làm điều đó? Vậy nên

142
00:10:13,120 --> 00:10:15,800
, đây là nơi tôi sẽ lấy ID,

143
00:10:15,800 --> 00:10:19,370
vì vậy tôi sẽ nói cộng với cái này.

144
00:10:19,370 --> 00:10:23,760
Ngoài ra để lấy giá trị tuyến đường,

145
00:10:23,760 --> 00:10:30,565
tôi cần phải tiêm một dịch vụ khác gọi là dịch vụ ActiveDRoute.

146
00:10:30,565 --> 00:10:32,740
Đó là một phần của bộ định tuyến Angular.

147
00:10:32,740 --> 00:10:39,970
Vì vậy, dịch vụ ActivateDroute này cung cấp cho tôi quyền truy cập vào tuyến đường ở đây.

148
00:10:39,970 --> 00:10:41,940
Vì vậy, tôi sẽ nói,

149
00:10:41,940 --> 00:10:47,770
vì vậy cùng với DishService tôi cũng cần phải xác định thêm một

150
00:10:47,770 --> 00:10:54,305
gọi là tuyến đường đó sẽ là dịch vụ ActiveDRoute ở đây.

151
00:10:54,305 --> 00:10:56,890
Vì vậy, tất cả ba người này sẽ có sẵn cho tôi.

152
00:10:56,890 --> 00:11:00,265
Vì vậy, ngay đó, tôi có thể yêu cầu

153
00:11:00,265 --> 00:11:10,840
tuyến đường này, Snapshot, Params.

154
00:11:10,840 --> 00:11:18,500
Params này là một mảng

155
00:11:18,500 --> 00:11:25,760
mà tôi có thể chỉ mục bằng cách sử dụng id như giá trị, vì vậy Params id

156
00:11:25,760 --> 00:11:30,340
này lấy tôi id từ tham số.

157
00:11:30,340 --> 00:11:34,750
Vì vậy, khi tôi xác định URL này,

158
00:11:34,750 --> 00:11:41,070
URL cho điều này sẽ được định nghĩa là Dishdetail.

159
00:11:41,070 --> 00:11:43,320
Ví dụ, DishDetail 0, D

160
00:11:43,320 --> 00:11:47,760
ishDetail 1, DishDetail 2, v.v.

161
00:11:47,760 --> 00:11:54,060
Vì vậy, đó là cách các URL cho các thành phần này sẽ được định nghĩa ở đó.

162
00:11:54,060 --> 00:11:56,520
Vì vậy, giá trị đó tôi sẽ lấy vào đây.

163
00:11:56,520 --> 00:11:59,950
Bây giờ, một khi tôi nắm được ý tưởng của món ăn, sau đó tôi có thể nói,

164
00:11:59,950 --> 00:12:08,125
món ăn này bằng DishService

165
00:12:08,125 --> 00:12:17,915
và lấy món ăn và GetDish sẽ lấy id làm tham số ở đây.

166
00:12:17,915 --> 00:12:22,825
Vì vậy, với điều này, khi tôi nhấp vào một món ăn trong thành phần menu của tôi,

167
00:12:22,825 --> 00:12:26,410
liên kết mà tôi có liên kết router mà tôi đã thiết lập ở đó,

168
00:12:26,410 --> 00:12:31,770
sẽ vượt qua trong id món ăn để Router của tôi như RouterParameter,

169
00:12:31,770 --> 00:12:34,525
và điều đó sẽ trở thành có sẵn cho tôi trong thành

170
00:12:34,525 --> 00:12:40,380
phần DishDetail của tôi bằng cách truy cập vào dịch vụ ActiveDroute ở đây.

171
00:12:40,380 --> 00:12:42,515
Vì vậy, một khi tôi nhận được giữ của nó,

172
00:12:42,515 --> 00:12:46,820
sau đó tôi có thể sử dụng giá trị đó để truy vấn các món ăn ở đây.

173
00:12:46,820 --> 00:12:50,630
Bây giờ, đây không phải là cách hoàn chỉnh để làm việc.

174
00:12:50,630 --> 00:12:53,080
Sau đó trong mô-đun tiếp theo,

175
00:12:53,080 --> 00:12:56,120
chúng ta sẽ sử dụng một cái gì đó gọi là phản ứng JavaScript.

176
00:12:56,120 --> 00:12:59,640
Sau đó, tại thời điểm đó, tôi sẽ trở lại để xác định lại điều này theo

177
00:12:59,640 --> 00:13:04,870
một cách khác để thành phần DishDetail của tôi có thể theo dõi

178
00:13:04,870 --> 00:13:09,120
bất kỳ thay đổi mà tôi thực hiện cho URL của tôi và

179
00:13:09,120 --> 00:13:14,515
tự động thay đổi thông tin đang được hiển thị bởi thành phần này.

180
00:13:14,515 --> 00:13:19,445
Chúng tôi sẽ đi đến điều đó trong một trong những bài tập sau này trong mô-đun tiếp theo,

181
00:13:19,445 --> 00:13:23,890
nhưng điều này hoạt động tốt cho thời điểm này vì vậy chúng tôi sẽ sử dụng điều này.

182
00:13:23,890 --> 00:13:27,070
Ngoài ra, bây giờ khi tôi đi đến các chi tiết của món ăn

183
00:13:27,070 --> 00:13:30,335
tôi muốn có thể trở lại thực đơn từ món ăn.

184
00:13:30,335 --> 00:13:36,135
Vì vậy, tôi sẽ thêm vào một nút trở lại vào thẻ của tôi một nút trở lại vào thẻ của tôi,

185
00:13:36,135 --> 00:13:41,905
mà khi nhấn sẽ đưa tôi trở lại vị trí trước đó trong trình duyệt của tôi.

186
00:13:41,905 --> 00:13:48,230
Vì vậy, để làm điều đó tôi sẽ thêm vào một phương pháp ở đây gọi là GoBack,

187
00:13:50,020 --> 00:13:57,280
mà về cơ bản sẽ làm cho sử

188
00:13:57,280 --> 00:14:03,735
dụng dịch vụ vị trí mà tôi đã bao gồm ở đây.

189
00:14:03,735 --> 00:14:09,300
Dịch vụ Vị trí cung cấp một phương pháp gọi là Quay lại cho phép tôi

190
00:14:09,300 --> 00:14:15,000
quay lại mục trước đó trong lịch sử trình duyệt.

191
00:14:15,000 --> 00:14:19,890
Vì vậy, bằng cách đó, tôi sẽ điều hướng trở lại trình đơn từ các chi tiết ở đây.

192
00:14:19,890 --> 00:14:22,430
Vì vậy, phương pháp GoBack này được thêm vào ở đây.

193
00:14:22,430 --> 00:14:28,160
Bây giờ, chúng ta cần phải đi và sửa chữa thành phần DishDetail ở đây.

194
00:14:28,160 --> 00:14:32,390
Vì vậy, trong tập tin mẫu thành phần DishDetail,

195
00:14:32,390 --> 00:14:36,950
ở đây chúng tôi có hai nút đó là Like và Share nút.

196
00:14:36,950 --> 00:14:40,040
Tôi sẽ thêm vào một nút nữa ở đây.

197
00:14:42,920 --> 00:14:47,155
Đối với nút này, tôi sẽ thêm vào,

198
00:14:47,155 --> 00:14:49,220
nếu nút này được nhấp

199
00:14:49,220 --> 00:14:55,330
vào, điều này sẽ dẫn đến một cuộc gọi đến phương pháp GoBack mà

200
00:14:55,330 --> 00:15:03,430
tôi vừa thêm vào thành phần DishDetail của tôi.

201
00:15:03,430 --> 00:15:10,555
Vì vậy, đây sẽ là một nút Quay lại ở đó.

202
00:15:10,555 --> 00:15:12,625
Trong khi chúng tôi đang ở đó,

203
00:15:12,625 --> 00:15:16,540
chúng tôi cũng có thể sửa chữa các thành phần chân trang liên kết cũng.

204
00:15:16,540 --> 00:15:22,645
Vì vậy, đi đến footercomponent.htmlfile ở dưới cùng ở đây, nơi chúng tôi có liên kết này,

205
00:15:22,645 --> 00:15:29,785
tôi sẽ thêm vào RouterLink ở đây với

206
00:15:29,785 --> 00:15:38,110
tham số nhà cho người đầu tiên,

207
00:15:38,110 --> 00:15:47,390
và sau đó trình đơn cho thứ hai,

208
00:15:51,240 --> 00:16:00,330
và liên hệ với chúng tôi cho thứ ba trong Footer ở đây.

209
00:16:00,330 --> 00:16:02,710
Hãy lưu các thay đổi.

210
00:16:02,710 --> 00:16:04,785
Đi đến ứng dụng của

211
00:16:04,785 --> 00:16:06,615
bạn, nếu bây giờ bạn nhấp vào menu,

212
00:16:06,615 --> 00:16:09,195
các mục menu được hiển thị ở đây.

213
00:16:09,195 --> 00:16:11,895
Nếu chúng ta nhấp vào bất kỳ một trong các mục trình đơn,

214
00:16:11,895 --> 00:16:20,585
bạn sẽ nhận thấy rằng các chi tiết của món ăn được hiển thị trong một cái nhìn riêng biệt ở đây.

215
00:16:20,585 --> 00:16:22,900
Chi tiết này, như bạn có thể thấy,

216
00:16:22,900 --> 00:16:26,450
đây chính xác là những gì các thành phần DishDetail được hiển thị trước đó,

217
00:16:26,450 --> 00:16:29,620
nhưng ở dưới cùng của menu trong thành phần menu,

218
00:16:29,620 --> 00:16:33,260
bây giờ chúng ta có hiển thị trong một chế độ xem riêng biệt.

219
00:16:33,260 --> 00:16:35,760
Bây giờ, thành phần DishDetail này,

220
00:16:35,760 --> 00:16:39,290
bây giờ bạn có thể quay lại trình đơn bằng cách nhấp vào nút Quay lại.

221
00:16:39,290 --> 00:16:40,670
Vì vậy, khi bạn nhấp vào nút Quay lại,

222
00:16:40,670 --> 00:16:41,690
bạn đang trở lại trình đơn.

223
00:16:41,690 --> 00:16:43,490
Khi bạn nhấp vào một mục khác,

224
00:16:43,490 --> 00:16:47,575
bạn sẽ thấy rằng các chi tiết của mục cụ thể đó đang được hiển thị ở đây,

225
00:16:47,575 --> 00:16:51,560
tương tự cho thứ ba quá và sau đó bạn có thể quay trở lại.

226
00:16:51,560 --> 00:16:54,645
Bây giờ, khi bạn nhấp vào bất kỳ một trong những mục này,

227
00:16:54,645 --> 00:17:02,780
lưu ý giá trị của URL trong thanh địa chỉ.

228
00:17:02,780 --> 00:17:08,565
Vì vậy, đây là máy chủ địa phương 4,200 dấu gạch chéo DishDetail 0.

229
00:17:08,565 --> 00:17:12,080
Số không này là id của món ăn này.

230
00:17:12,080 --> 00:17:14,630
Vì vậy, giá trị đó đang được thông qua,

231
00:17:14,630 --> 00:17:19,985
và đó là cách các thành phần DishDetail ở đây đang được hiển thị ở đây, quay trở lại.

232
00:17:19,985 --> 00:17:21,540
Khi bạn nhấp vào mục khác,

233
00:17:21,540 --> 00:17:27,750
bạn có thể thấy rằng bây giờ trong các URL nói, DishDetail dấu gạch chéo 1.

234
00:17:27,750 --> 00:17:29,750
Tương tự như vậy, đối với thứ tư,

235
00:17:29,750 --> 00:17:33,390
nó nói DishDetail slash 3, và như vậy.

236
00:17:33,390 --> 00:17:37,560
Vì vậy, giá trị tham số này là một trong đó chỉ ra cho

237
00:17:37,560 --> 00:17:41,210
các thành phần DishDetail mà món ăn cụ thể

238
00:17:41,210 --> 00:17:44,235
nên được hiển thị bởi các thành phần DishDetail.

239
00:17:44,235 --> 00:17:49,250
Đó là những gì đang được sử dụng bởi các thành phần DishDetail để lấy thông

240
00:17:49,250 --> 00:17:55,045
tin về món ăn cụ thể từ DishService bằng cách sử dụng phương pháp GetDish,

241
00:17:55,045 --> 00:18:01,715
và sau đó thông tin đó đang được hiển thị trong chế độ xem của các thành phần DishDetail.

242
00:18:01,715 --> 00:18:03,675
Vì vậy, bây giờ trong bài tập này,

243
00:18:03,675 --> 00:18:09,575
chúng ta đã học được cách chúng ta có thể sử dụng RouteParameters để truyền thông tin cho một thành phần,

244
00:18:09,575 --> 00:18:14,804
và sau đó các thành phần nhận được quyền truy cập vào các tham số và sau đó sử dụng RouteParameter đó

245
00:18:14,804 --> 00:18:18,320
để quyết định cách nó kết xuất

246
00:18:18,320 --> 00:18:22,850
xem hoặc lấy thông tin và hiển thị các xem cho phù hợp .

247
00:18:22,850 --> 00:18:26,385
Với điều này, chúng tôi hoàn thành bài tập này.

248
00:18:26,385 --> 00:18:31,490
Chúng tôi đã gần như hoàn thành việc xây dựng ứng dụng trang duy nhất của chúng tôi

249
00:18:31,490 --> 00:18:37,145
cho các ứng dụng nhà hàng mà chúng tôi đã làm việc trên cho đến nay.

250
00:18:37,145 --> 00:18:40,815
Đây là thời điểm tốt để bạn thực hiện một cam kết git với thông điệp,

251
00:18:40,815 --> 00:18:44,060
Đơn trang ứng dụng phần 2.