1
00:00:03,680 --> 00:00:10,440
Bây giờ bạn đã nhận được bàn chân của bạn ướt với Angular quan sát trong bài tập trước đó,

2
00:00:10,440 --> 00:00:11,860
bạn đang nhìn lại và nói rằng,

3
00:00:11,860 --> 00:00:14,320
“Ồ, quan sát không phải là xấu sau khi tất cả,

4
00:00:14,320 --> 00:00:17,070
họ là khá đơn giản để sử dụng.”

5
00:00:17,070 --> 00:00:19,125
Vì vậy, chúng ta có nhiều tham vọng hơn một chút.

6
00:00:19,125 --> 00:00:25,080
Chúng ta hãy đi thêm một bước nữa và sau đó sử dụng một tích hợp quan sát được trong Angular.

7
00:00:25,080 --> 00:00:27,960
Các tham số quan sát được xuất phát từ

8
00:00:27,960 --> 00:00:32,655
dịch vụ tuyến đường kích hoạt trong mô-đun bộ định tuyến của chúng tôi.

9
00:00:32,655 --> 00:00:35,940
Bây giờ chúng ta sẽ cập nhật thành phần chi tiết món ăn,

10
00:00:35,940 --> 00:00:39,630
để sử dụng các tham số có thể quan sát được từ

11
00:00:39,630 --> 00:00:42,770
dịch vụ hạn hán kích hoạt để

12
00:00:42,770 --> 00:00:47,975
hỗ trợ một số tính năng mới trong ứng dụng Angular của chúng tôi.

13
00:00:47,975 --> 00:00:52,400
Trước khi chúng tôi tiếp tục cập nhật thành phần chi tiết món ăn,

14
00:00:52,400 --> 00:00:57,650
tôi muốn giới thiệu thêm một phương pháp trong tập tin service.t món ăn của tôi.

15
00:00:57,650 --> 00:01:02,735
Vì vậy, mở tập tin service.t món ăn và sau đó chúng tôi sẽ thêm một phương pháp mới gọi là

16
00:01:02,735 --> 00:01:08,060
getDishids và điều này về cơ bản sẽ

17
00:01:08,060 --> 00:01:14,715
trả lại tất cả các ID món ăn là cho tất cả các món ăn trong bộ sưu tập của chúng tôi về món ăn.

18
00:01:14,715 --> 00:01:17,650
Vì vậy, để làm điều đó, chúng tôi sẽ sử dụng một trở lại

19
00:01:17,650 --> 00:01:26,535
và phương pháp và trước khi tôi làm điều đó, điều

20
00:01:26,535 --> 00:01:31,915
này là trả về một quan sát được.

21
00:01:31,915 --> 00:01:33,480
Loại gì?

22
00:01:33,480 --> 00:01:38,690
Đây là trả về một quan sát được bao gồm một mảng

23
00:01:38,690 --> 00:01:44,510
chuỗi và chúng ta hãy trì hoãn

24
00:01:44,510 --> 00:01:50,385
nó bằng 2.000 mili giây hoặc hai giây.

25
00:01:50,385 --> 00:01:52,415
Vậy, chúng ta muốn quay trở lại là gì?

26
00:01:52,415 --> 00:01:54,895
Chúng tôi muốn lấy mảng món ăn,

27
00:01:54,895 --> 00:01:58,730
trích xuất ra tất cả các ID từ mảng món ăn và

28
00:01:58,730 --> 00:02:02,665
sau đó cung cấp cho thành phần Dish Detail của chúng tôi,

29
00:02:02,665 --> 00:02:06,305
bởi vì chúng tôi cần rằng trong thành phần Dish Detail của chúng tôi để thực hiện

30
00:02:06,305 --> 00:02:10,365
các tính năng mới mà chúng tôi sẽ hỗ trợ trong ứng dụng của chúng tôi.

31
00:02:10,365 --> 00:02:13,725
Bây giờ, đây là một cách mà tôi muốn thực hiện nó.

32
00:02:13,725 --> 00:02:18,825
Sau đó, chúng ta có thể thấy làm thế nào chúng ta có thể làm điều đó một cách tốt hơn,

33
00:02:18,825 --> 00:02:21,240
trong một trong những bài tập sau này.

34
00:02:21,240 --> 00:02:24,680
Hiện tại, với cách thức thực hiện dịch vụ,

35
00:02:24,680 --> 00:02:32,455
đây là cách tốt nhất mà tôi có thể làm để thực hiện giải pháp này để chứng minh một tính năng mới.

36
00:02:32,455 --> 00:02:33,850
Vì vậy, trong tầm quan sát,

37
00:02:33,850 --> 00:02:35,050
những gì tôi sẽ làm là,

38
00:02:35,050 --> 00:02:40,070
tôi sẽ lấy mảng món ăn và mảng món ăn.

39
00:02:40,070 --> 00:02:43,770
Tôi sẽ sử dụng bản đồ,

40
00:02:44,020 --> 00:02:49,670
một nhà điều hành mảng, bản đồ điều hành mảng JavaScript.

41
00:02:49,670 --> 00:02:51,410
Vì vậy, các nhà điều hành bản đồ,

42
00:02:51,410 --> 00:02:58,700
làm thế nào nó hoạt động là nó mất mỗi mục từ mảng món ăn và chúng ta có thể ánh xạ

43
00:02:58,700 --> 00:03:01,760
mục đó vào một mục khác và sau đó xây dựng

44
00:03:01,760 --> 00:03:06,195
mảng khác và sau đó trả về mảng sửa đổi đó.

45
00:03:06,195 --> 00:03:10,520
Vì vậy, đối với mỗi mục trong mảng món ăn của

46
00:03:10,520 --> 00:03:14,315
tôi, tôi sẽ lấy mục đó và sau đó thay vào đó

47
00:03:14,315 --> 00:03:20,510
trích xuất ID món ăn và sau đó từ ID món ăn.

48
00:03:20,510 --> 00:03:25,880
Vì vậy, tôi sẽ kết thúc xây dựng một mảng mới ra khỏi nó,

49
00:03:25,880 --> 00:03:28,420
trong đó chỉ chứa các ID,

50
00:03:28,420 --> 00:03:33,515
do đó, một mảng các ID và chúng ta đã thấy rằng các ID là chuỗi,

51
00:03:33,515 --> 00:03:37,920
đó là những gì tôi sẽ trở về từ ID món ăn của tôi ở đây.

52
00:03:37,920 --> 00:03:41,500
Đó là nó, toán tử mảng bản đồ.

53
00:03:41,500 --> 00:03:44,800
Nếu bạn tra cứu các toán tử mảng JavaScript,

54
00:03:44,800 --> 00:03:47,760
bạn sẽ thấy điều mà toán tử mảng bản đồ làm.

55
00:03:47,760 --> 00:03:50,540
Thật vậy, toán tử mảng bản đồ cũng

56
00:03:50,540 --> 00:03:53,240
thú vị từ quan điểm của các quan sát được,

57
00:03:53,240 --> 00:03:55,910
bởi vì một quan sát được như bạn thấy,

58
00:03:55,910 --> 00:03:58,950
cũng có thể được xem như một mảng,

59
00:03:58,950 --> 00:04:00,805
một luồng các giá trị,

60
00:04:00,805 --> 00:04:02,330
có thể được xem như một mảng.

61
00:04:02,330 --> 00:04:05,560
Vì vậy, các nhà điều hành bản đồ cũng có thể được sử dụng trong quan sát.

62
00:04:05,560 --> 00:04:11,935
Nhưng tại thời điểm này, tôi đang sử dụng nó đơn giản như một toán tử mảng JavaScript.

63
00:04:11,935 --> 00:04:13,660
Hãy lưu các thay đổi.

64
00:04:13,660 --> 00:04:20,815
Bây giờ, chúng ta sẽ đi đến thành phần chi tiết Dish và sau đó cập nhật thành phần chi tiết Dish.

65
00:04:20,815 --> 00:04:23,129
Bây giờ, trong thành phần chi tiết Dish,

66
00:04:23,129 --> 00:04:24,790
cùng với Dish,

67
00:04:24,790 --> 00:04:29,940
tôi sẽ khai báo một biến được gọi là DishIds,

68
00:04:29,940 --> 00:04:32,755
mà là một mảng của chuỗi.

69
00:04:32,755 --> 00:04:36,470
DishIds này sẽ lưu trữ tất cả các ID của

70
00:04:36,470 --> 00:04:42,225
tất cả các món ăn trong bộ sưu tập của tôi về các món ăn trong thực đơn của tôi.

71
00:04:42,225 --> 00:04:45,410
Sau đó, tôi cũng sẽ có

72
00:04:45,640 --> 00:04:53,490
thêm hai biến được gọi là trước và tiếp theo của chuỗi loại.

73
00:04:53,490 --> 00:04:55,215
Bây giờ, tại sao tôi cần những thứ này?

74
00:04:55,215 --> 00:04:56,980
Điều đó sẽ trở nên rõ ràng hơn một chút, một

75
00:04:56,980 --> 00:04:58,790
khi bạn thực hiện quan điểm,

76
00:04:58,790 --> 00:05:00,560
nơi tôi sẽ sử dụng điều này.

77
00:05:00,560 --> 00:05:04,480
Bây giờ, những gì tôi sẽ làm ở đây là,

78
00:05:04,480 --> 00:05:10,610
bên trong NGInit của tôi trước đó,

79
00:05:10,610 --> 00:05:18,800
chúng tôi đã cho id là bằng cộng với route.snapshot params ID này.

80
00:05:18,800 --> 00:05:22,565
Khi tôi làm điều này trong bài tập trước,

81
00:05:22,565 --> 00:05:28,580
tôi đã không giải thích cho bạn những gì ảnh chụp nhanh đang làm và tại sao chúng tôi làm theo cách này?

82
00:05:28,580 --> 00:05:31,490
Bởi vì bạn cần phải hiểu những người quan sát,

83
00:05:31,490 --> 00:05:34,060
trước khi bạn hiểu những gì ảnh chụp có nghĩa là.

84
00:05:34,060 --> 00:05:43,940
Bây giờ, trong Angular, dịch vụ tuyến đường kích hoạt cung cấp một tập hợp các quan sát được.

85
00:05:43,940 --> 00:05:46,775
Một trong những quan sát được gọi là một params.

86
00:05:46,775 --> 00:05:48,860
Những gì params này cung cấp cho chúng tôi,

87
00:05:48,860 --> 00:05:56,030
là một cách để có được các giá trị tham số trong URL của tôi.

88
00:05:56,030 --> 00:06:00,170
Vì vậy, bạn thấy rằng khi bạn giới thiệu các thông số tuyến đường,

89
00:06:00,170 --> 00:06:03,605
bạn đã giới thiệu một trong các thông số tuyến đường như dấu hai chấm ID.

90
00:06:03,605 --> 00:06:07,590
ID dấu hai chấm đó trở nên có sẵn như là một quan sát được.

91
00:06:07,590 --> 00:06:10,330
Vì vậy, bất cứ khi nào giá trị đó thay đổi,

92
00:06:10,330 --> 00:06:15,745
bạn có thể quan sát những thay đổi trong giá trị đó và sau đó thực hiện hành động tương ứng.

93
00:06:15,745 --> 00:06:21,010
Nhưng, trước đó khi chúng tôi thực hiện các thành phần chi tiết món ăn,

94
00:06:21,010 --> 00:06:22,825
chúng tôi không biết về quan sát được.

95
00:06:22,825 --> 00:06:26,200
Vì vậy, tôi không thể giải thích những gì ảnh chụp nhanh đang làm tại thời điểm đó.

96
00:06:26,200 --> 00:06:30,460
Bây giờ, hãy để tôi quay lại và giải thích chính xác những gì ảnh chụp nhanh làm.

97
00:06:30,460 --> 00:06:32,870
Khi chúng tôi sử dụng này như là ảnh chụp ở đây,

98
00:06:32,870 --> 00:06:34,250
những gì chúng tôi đang làm là,

99
00:06:34,250 --> 00:06:37,580
chúng tôi đang lấy một ảnh chụp từ

100
00:06:37,580 --> 00:06:40,250
dịch vụ tuyến đường và sau đó chúng tôi đang có được

101
00:06:40,250 --> 00:06:43,605
các tham số quan sát tại thời điểm cụ thể của thời gian.

102
00:06:43,605 --> 00:06:46,310
Giá trị của các tham số tại

103
00:06:46,310 --> 00:06:49,340
thời điểm cụ thể đó và sau đó sử dụng nó trong ứng dụng của chúng tôi.

104
00:06:49,340 --> 00:06:51,730
Mặc dù đó không phải là cách lý tưởng để làm điều đó.

105
00:06:51,730 --> 00:06:55,010
Thay vào đó, vì vậy chúng ta hãy sử dụng các quan sát

106
00:06:55,010 --> 00:06:59,990
trực tiếp và sau đó đáp ứng bất cứ khi nào mà quan sát được thay đổi.

107
00:06:59,990 --> 00:07:04,650
Vì vậy, làm thế nào để chúng tôi cập nhật mã này để sử dụng các quan sát trực tiếp?

108
00:07:04,650 --> 00:07:08,030
Vì vậy, những gì chúng tôi nhận ra là từ các dịch vụ tuyến đường kích hoạt,

109
00:07:08,030 --> 00:07:10,390
chúng tôi có các params có thể quan sát sẵn cho chúng tôi.

110
00:07:10,390 --> 00:07:13,070
Vì vậy, chúng tôi sẽ làm cho việc sử dụng các tham số quan sát

111
00:07:13,070 --> 00:07:16,755
được và bất cứ khi nào có một sự thay đổi trong nơi params quan sát được,

112
00:07:16,755 --> 00:07:22,750
chúng tôi có thể bắt đầu một sự thay đổi trong thành phần DishDetail của chúng tôi.

113
00:07:22,750 --> 00:07:25,820
Hãy để tôi minh họa cho bạn làm thế nào chúng tôi sẽ làm cho việc sử dụng

114
00:07:25,820 --> 00:07:28,935
các params quan sát được bằng cách cập nhật mã này.

115
00:07:28,935 --> 00:07:30,735
Vì vậy, đi đến mã này,

116
00:07:30,735 --> 00:07:32,630
những gì tôi sẽ làm bây giờ,

117
00:07:32,630 --> 00:07:37,615
là tôi sẽ thay đổi điều này thành nói,

118
00:07:37,615 --> 00:07:42,950
“Tôi có tuyến đường này và từ tuyến đường này,

119
00:07:42,950 --> 00:07:45,640
tôi có các params có sẵn đã.”

120
00:07:45,640 --> 00:07:50,030
Vì vậy, tôi sẽ loại bỏ các ảnh chụp nhanh và tôi sử dụng các tham số.

121
00:07:50,030 --> 00:07:52,060
Vì vậy, với params này,

122
00:07:52,060 --> 00:08:00,410
những gì tôi có bây giờ là truy cập vào các params quan sát được.

123
00:08:00,410 --> 00:08:03,235
Bây giờ, kể từ khi chúng ta có params này quan sát được,

124
00:08:03,235 --> 00:08:09,545
Tôi sẽ sử dụng một nhà điều hành trên params này quan sát được và sau đó sửa đổi nó.

125
00:08:09,545 --> 00:08:17,275
Vì vậy, các nhà điều hành mà tôi sẽ sử dụng được gọi là nhà điều hành SwitchMap.

126
00:08:17,275 --> 00:08:21,050
Các nhà điều hành SwitchMap

127
00:08:21,050 --> 00:08:26,230
cho phép tôi sử dụng các tham số quan sát được và bạn thấy dòng squiggly màu đỏ có nghĩa là,

128
00:08:26,230 --> 00:08:31,590
rằng tôi cần phải nhập khẩu SwitchMap quan sát được ở đây.

129
00:08:31,590 --> 00:08:34,320
Vì vậy, tôi sẽ đi vào

130
00:08:34,320 --> 00:08:39,660
đầu vào của tôi ở đây và

131
00:08:39,660 --> 00:08:45,880
sau đó tôi sẽ nhập rxjs và nhà điều hành.

132
00:08:49,640 --> 00:08:52,710
Vì vậy, từ params quan sát được,

133
00:08:52,710 --> 00:08:57,740
tôi nhận được params đó là loại Params.

134
00:08:57,740 --> 00:09:05,700
Vì vậy, nhớ lại rằng chúng tôi đã nhập các params từ thư viện bộ định tuyến ở đây.

135
00:09:05,700 --> 00:09:07,520
Vì vậy, chúng tôi nhấn mạnh để params ở đây,

136
00:09:07,520 --> 00:09:12,289
từ thư viện bộ định tuyến và chúng tôi cũng nhập khẩu dịch vụ tuyến đường kích hoạt ở đây,

137
00:09:12,289 --> 00:09:15,800
và sau đó chúng tôi làm cho chúng có sẵn trong nhà xây dựng của chúng tôi ở đây,

138
00:09:15,800 --> 00:09:18,225
thông qua các tuyến đường kích hoạt.

139
00:09:18,225 --> 00:09:25,055
Vì vậy, đó là lý do tại sao chúng ta có thể làm điều này params tuyến đường để có được giữ của các params quan sát được.

140
00:09:25,055 --> 00:09:27,740
Tôi sẽ sử dụng các nhà điều hành SwitchMap trên params

141
00:09:27,740 --> 00:09:34,049
quan sát được và sau đó khi tôi nhận được các params quan sát được,

142
00:09:34,049 --> 00:09:44,880
những gì tôi sẽ làm là để có điều đó và sau đó nói, DishService này.

143
00:09:45,030 --> 00:09:54,370
GetDish, và sau đó ID này bây giờ nên được thu được bằng cách sử dụng các params.

144
00:09:54,370 --> 00:09:58,600
Bạn thấy tham số mà chúng tôi có ở đó.

145
00:09:58,600 --> 00:10:04,765
Từ các tham số, tôi sẽ nói trong dấu ngoặc ID.

146
00:10:04,765 --> 00:10:11,490
Vì vậy, những gì xảy ra là bất cứ khi nào các tham số quan sát được thay đổi giá trị,

147
00:10:11,490 --> 00:10:17,680
có nghĩa là các thông số tuyến đường thay đổi giá trị, sau đó ngay lập tức,

148
00:10:17,680 --> 00:10:20,900
các nhà điều hành bản đồ chuyển đổi sẽ mất giá trị params,

149
00:10:20,900 --> 00:10:25,320
và sau đó làm một GetDish từ DishService của tôi.

150
00:10:25,320 --> 00:10:27,060
Vì vậy, điều này sẽ được tự động khởi xướng,

151
00:10:27,060 --> 00:10:31,280
và điều này sẽ có sẵn như

152
00:10:31,280 --> 00:10:36,900
quan sát khác được phát ra bằng cách làm điều hành bản đồ chuyển đổi này trên quan sát này.

153
00:10:36,900 --> 00:10:41,580
Vì vậy, chúng tôi đang tạo ra một quan sát mới đó là GetDish,

154
00:10:41,580 --> 00:10:45,820
mà sẽ trả lại các đối tượng món ăn ở đây.

155
00:10:45,820 --> 00:10:49,285
Bây giờ, một khi chúng ta có được GetDish ở đó,

156
00:10:49,285 --> 00:10:53,350
sau đó bây giờ có thể có sẵn như là một quan sát được.

157
00:10:53,350 --> 00:10:57,700
Tôi chỉ cần đăng ký để quan sát được bằng cách sử dụng đăng ký ở đây.

158
00:10:57,700 --> 00:10:59,815
Sau đó, ở đó tôi có được món ăn.

159
00:10:59,815 --> 00:11:03,930
Món ăn này thu được bằng cách làm GetDish này ở đây.

160
00:11:03,930 --> 00:11:08,790
Món ăn đó, sau đó tôi có thể sử dụng để lập bản đồ nó vào

161
00:11:08,790 --> 00:11:14,025
biến món ăn của tôi mà tôi đã khai báo trước đó.

162
00:11:14,025 --> 00:11:17,790
Vì vậy, theo cách này, món ăn của tôi bây giờ được cập nhật.

163
00:11:17,790 --> 00:11:20,775
Vì vậy, bất cứ khi nào các params có thể quan sát được thay đổi,

164
00:11:20,775 --> 00:11:24,210
món ăn của tôi sẽ được cập nhật cho món ăn mới.

165
00:11:24,210 --> 00:11:27,590
Vì vậy, chú ý làm thế nào tôi đang lấy một quan sát, các tham số quan sát được,

166
00:11:27,590 --> 00:11:33,050
và sau đó tôi đang ánh xạ các tham số quan sát được vào một quan sát được mà về cơ bản là

167
00:11:33,050 --> 00:11:40,675
đi trong lấy giá trị món ăn từ DishService của tôi,

168
00:11:40,675 --> 00:11:42,955
và sau đó làm cho rằng có sẵn như là một quan sát được.

169
00:11:42,955 --> 00:11:48,010
Sau đó, tôi đăng ký để quan sát được ở đây, và sau đó,

170
00:11:48,010 --> 00:11:49,780
tôi nhận được giá trị món ăn ở đây,

171
00:11:49,780 --> 00:11:52,720
và sau đó tôi đang lập bản đồ giá trị món ăn hoặc thay vì

172
00:11:52,720 --> 00:11:56,795
làm cho biến món ăn bằng giá trị món ăn ở đây.

173
00:11:56,795 --> 00:12:00,415
Chú ý làm thế nào bằng cách sử dụng các quan sát,

174
00:12:00,415 --> 00:12:04,865
bây giờ bạn có thể lấy một quan sát được sau đó ánh xạ nó vào một quan sát khác.

175
00:12:04,865 --> 00:12:06,730
Tại sao điều này lại thú vị?

176
00:12:06,730 --> 00:12:12,680
Nếu bây giờ, tôi có một cách để sửa đổi tham số tuyến đường

177
00:12:12,680 --> 00:12:19,005
đó, sau đó tôi sẽ có thể chuyển đổi giữa các món ăn khác nhau và xem các món ăn khác nhau.

178
00:12:19,005 --> 00:12:22,100
Thật không may, tôi không có điều đó tại chỗ.

179
00:12:22,100 --> 00:12:25,735
Vì vậy, tôi cần phải sửa đổi các thành phần món ăn để cho phép tôi làm điều đó.

180
00:12:25,735 --> 00:12:31,545
Bây giờ, đây là nơi tôi sẽ bao gồm một vài nút vào chế độ xem của tôi mà khi tôi nhấp vào,

181
00:12:31,545 --> 00:12:36,390
tôi sẽ có thể điều hướng qua danh sách các món ăn của tôi.

182
00:12:36,390 --> 00:12:38,960
Bây giờ, để có thể điều hướng qua danh sách các món ăn của tôi,

183
00:12:38,960 --> 00:12:42,005
tôi cần phải biết bộ tất cả các món ăn của tôi,

184
00:12:42,005 --> 00:12:45,525
hoặc ít nhất tôi cần phải biết ID của tất cả các món ăn của tôi.

185
00:12:45,525 --> 00:12:51,410
Đó là lý do tại sao tôi sử dụng DishID này ở đây, được chứ?

186
00:12:51,410 --> 00:12:58,800
Vì vậy, bây giờ bạn thấy lý do tại sao tôi bao gồm các phương pháp DishIds vào DishService của tôi.

187
00:12:58,800 --> 00:13:01,455
Vậy, sau đó tôi bắt đầu.

188
00:13:01,455 --> 00:13:05,830
Tôi sẽ đầu tiên có được

189
00:13:05,830 --> 00:13:10,510
DishIds bằng cách

190
00:13:10,510 --> 00:13:16,970
gọi DishService,

191
00:13:17,070 --> 00:13:22,570
phương pháp GetDishIds tại thời điểm đó.

192
00:13:22,570 --> 00:13:25,735
Tôi vẫn đang làm việc với cách làm việc cũ.

193
00:13:25,735 --> 00:13:34,795
Tôi phải nhận ra rằng GetDishids này đang gửi đi trong quan sát được.

194
00:13:34,795 --> 00:13:39,365
Vì vậy, tôi cần phải đăng ký để quan sát điều đó.

195
00:13:39,365 --> 00:13:43,910
Bạn thấy cách bạn cần thay đổi cách suy nghĩ của

196
00:13:43,910 --> 00:13:48,340
bạn khi bạn đang hoạt động với các biến số ở đây.

197
00:13:48,340 --> 00:13:52,840
Vì vậy, chúng tôi sẽ nói DishIds đăng ký,

198
00:13:52,840 --> 00:13:54,935
và bên trong đăng ký,

199
00:13:54,935 --> 00:14:00,990
chúng tôi sẽ có được tham số đó là một mảng chuỗi,

200
00:14:00,990 --> 00:14:04,170
và sau đó tôi sẽ nói ngay ở đó,

201
00:14:04,170 --> 00:14:09,970
DishIds sẽ bằng DishIds.

202
00:14:09,970 --> 00:14:14,085
Thấy không, dễ dàng

203
00:14:14,085 --> 00:14:18,510
thay đổi cách suy nghĩ của bạn khi bạn muốn đối phó với một người quan sát.

204
00:14:18,510 --> 00:14:20,895
Vì vậy, GetDishIds đang gửi một quan sát được,

205
00:14:20,895 --> 00:14:26,790
và tôi đăng ký để quan sát được và sau đó tôi có DishIds ở đây có sẵn.

206
00:14:26,790 --> 00:14:29,130
Sau đó, cũng bằng cách đăng ký tham số.

207
00:14:29,130 --> 00:14:31,500
Nếu tôi có thể thay đổi tham số của tôi,

208
00:14:31,500 --> 00:14:35,340
giá trị tham số tuyến đường giá trị trong mã của tôi,

209
00:14:35,340 --> 00:14:38,300
sau đó tôi sẽ có thể điều hướng giữa các món ăn.

210
00:14:38,300 --> 00:14:41,240
Vì vậy, chúng ta hãy thực hiện phần đó.

211
00:14:41,240 --> 00:14:43,810
Chuyện này đang trở nên thú vị.

212
00:14:43,810 --> 00:14:47,515
Vì vậy, để cho phép tôi làm điều đó,

213
00:14:47,515 --> 00:14:53,190
vì vậy tôi sẽ giới thiệu một phương pháp khác ở đây được gọi là setPreNext,

214
00:14:55,770 --> 00:15:03,480
và điều này, tôi sẽ gửi một tham số disHid.

215
00:15:03,480 --> 00:15:06,295
Bây giờ, với disHid hiện tại của

216
00:15:06,295 --> 00:15:11,355
tôi, tôi muốn có thể tìm thấy các disHid trước đó và tiếp theo để tôi có thể thực hiện

217
00:15:11,355 --> 00:15:17,545
điều hướng của tôi giữa các món ăn trong thành phần dishdetail của tôi.

218
00:15:17,545 --> 00:15:22,635
Vì vậy, đó là lý do tại sao tôi tuyên bố prev và tiếp theo.

219
00:15:22,635 --> 00:15:25,555
Bây giờ, tôi cần để có thể khởi tạo hai giá trị này.

220
00:15:25,555 --> 00:15:28,650
Tất cả những gì tôi biết bây giờ là DisHid hiện tại của tôi.

221
00:15:28,650 --> 00:15:30,610
Vì vậy, bằng cách sử dụng disHid hiện tại,

222
00:15:30,610 --> 00:15:34,265
tôi muốn có thể tìm thấy các disHid trước đó và tiếp theo.

223
00:15:34,265 --> 00:15:36,080
Vì vậy, trong phương pháp này,

224
00:15:36,080 --> 00:15:40,255
tôi sẽ làm trước đó và tiếp theo disHid.

225
00:15:40,255 --> 00:15:42,160
Vì vậy, ở đây tôi sẽ nói,

226
00:15:42,160 --> 00:15:50,200
hãy chỉ số bằng DishID này.

227
00:15:50,200 --> 00:15:52,900
Bây giờ, tôi chỉ biết ID của món ăn của tôi,

228
00:15:52,900 --> 00:15:55,360
nhưng ID của món ăn của tôi không cho tôi mọi thứ.

229
00:15:55,360 --> 00:16:00,980
Tôi cần để có thể tìm thấy các món ăn trong mảng này của ID,

230
00:16:00,980 --> 00:16:06,510
vì vậy đó là lý do tại sao tôi nói DishID này, và IndexOf.

231
00:16:06,510 --> 00:16:13,640
Bạn nên biết toán tử IndexOf trên một mảng JavaScript.

232
00:16:13,640 --> 00:16:20,935
Toán tử IndexOf lấy một giá trị và sau đó tìm chỉ mục của giá trị đó trong mảng.

233
00:16:20,935 --> 00:16:27,605
Vì vậy, IndexOf và tham số ở đây,

234
00:16:27,605 --> 00:16:29,945
tôi sẽ cung cấp cho là DisHid,

235
00:16:29,945 --> 00:16:34,765
DisHid mà tôi sẽ có được trong một thời gian ngắn.

236
00:16:34,765 --> 00:16:38,765
Bây giờ, một khi tôi có được chỉ số của giá trị hiện tại này,

237
00:16:38,765 --> 00:16:42,385
tôi có thể sau đó ánh xạ

238
00:16:42,385 --> 00:16:49,420
hai DishID trước đó.

239
00:16:49,420 --> 00:16:59,080
Vì vậy, đây là nơi tôi

240
00:16:59,080 --> 00:17:08,980
sẽ làm một số ít mã phức tạp ở đây sẽ cho phép tôi để quấn xung quanh khi tôi.

241
00:17:08,980 --> 00:17:15,030
Vì vậy, lưu ý rằng mảng DishIds này chứa một số lượng nhất định của các giá trị đó.

242
00:17:15,030 --> 00:17:20,270
Nếu giá trị hiện tại của tôi DisHid là mục đầu tiên,

243
00:17:20,270 --> 00:17:24,565
sau đó giá trị trước đó sẽ là mục được lập chỉ mục zeroth trong mảng của tôi.

244
00:17:24,565 --> 00:17:26,590
Nhưng nếu giá trị hiện tại của tôi là mục zeroth,

245
00:17:26,590 --> 00:17:28,235
mục đầu tiên trong mảng của tôi,

246
00:17:28,235 --> 00:17:32,530
sau đó tôi muốn quấn xung quanh để có được mục cuối cùng trong mảng của tôi.

247
00:17:32,530 --> 00:17:36,770
Vì vậy, đây là nơi tôi sử dụng toán tử modulo với

248
00:17:36,770 --> 00:17:42,235
một số cách toán học để gói mọi thứ xung quanh.

249
00:17:42,235 --> 00:17:44,275
Vì vậy, tôi sẽ nói điều này DisHid

250
00:17:44,275 --> 00:18:14,500
cộng với chỉ số trừ đi một, và modulo này Dishids' chiều dài.

251
00:18:14,500 --> 00:18:15,925
Vì vậy, những gì tôi đang làm là,

252
00:18:15,925 --> 00:18:19,590
giá trị trước đó sẽ là chỉ số hiện tại, chỉ

253
00:18:19,590 --> 00:18:21,735
số của giá trị hiện tại,

254
00:18:21,735 --> 00:18:25,935
cộng với chiều dài của các món ăn trừ đi một.

255
00:18:25,935 --> 00:18:27,815
Bây giờ, nếu chỉ số là một,

256
00:18:27,815 --> 00:18:29,585
chỉ số trừ đi một sẽ cho tôi zero.

257
00:18:29,585 --> 00:18:30,680
Nếu chỉ số là 0,

258
00:18:30,680 --> 00:18:32,670
chỉ số trừ đi một sẽ cho tôi trừ đi một,

259
00:18:32,670 --> 00:18:34,210
nhưng đó không phải là những gì tôi muốn.

260
00:18:34,210 --> 00:18:38,190
Tôi muốn quấn quanh và lấy chiều dài disHid trừ đi một.

261
00:18:38,190 --> 00:18:41,870
Vì vậy, đó là lý do tại sao tôi bao gồm điều này trong đó,

262
00:18:41,870 --> 00:18:44,995
và sau đó làm một modulo với DishIds.

263
00:18:44,995 --> 00:18:47,660
Vì vậy, khi index là zero,

264
00:18:47,660 --> 00:18:51,915
tôi sẽ quấn xung quanh để có được mục cuối cùng trong mảng của tôi.

265
00:18:51,915 --> 00:18:56,965
Vì vậy, đó là cách tôi khởi tạo giá trị trước đó.

266
00:18:56,965 --> 00:18:59,120
Sau đó, giá trị tiếp theo,

267
00:18:59,120 --> 00:19:02,700
tôi sẽ sử dụng cùng một cách tiếp cận,

268
00:19:02,770 --> 00:19:08,205
nhưng quấn xung quanh bằng cách nói chỉ số cộng với một.

269
00:19:08,205 --> 00:19:11,780
Vì vậy, nếu tôi hiện đang ở mục cuối cùng trong mảng,

270
00:19:11,780 --> 00:19:14,200
sau đó tôi muốn quấn quanh bằng không.

271
00:19:14,200 --> 00:19:16,715
Vậy, đó là phần còn lại của những gì tôi đang làm.

272
00:19:16,715 --> 00:19:19,200
Vì vậy, ở đó, tôi đang thiết lập trước đó và tiếp theo.

273
00:19:19,200 --> 00:19:21,795
Vì vậy, khi nào tôi nên đặt trước và tiếp theo?

274
00:19:21,795 --> 00:19:23,965
Bất cứ khi nào món ăn của

275
00:19:23,965 --> 00:19:27,630
tôi thay đổi, tôi cần phải có khả năng bắt đầu một cuộc gọi cho điều này.

276
00:19:27,630 --> 00:19:30,590
Bây giờ, tôi đang thay đổi giá trị món ăn của mình ở đâu?

277
00:19:30,590 --> 00:19:34,365
Nhìn lại đăng ký ở đây,

278
00:19:34,365 --> 00:19:35,905
chú ý rằng ngay tại đó,

279
00:19:35,905 --> 00:19:40,180
bạn đang thay đổi món ăn của bạn mỗi khi tham số của chúng tôi thay đổi.

280
00:19:40,180 --> 00:19:42,035
Vì vậy, tại thời điểm đó,

281
00:19:42,035 --> 00:19:45,495
tôi muốn đặt lại giá trị trước đó và tiếp theo của tôi.

282
00:19:45,495 --> 00:19:51,940
Vì vậy, tôi sẽ thay đổi điều này thành một khối mã ở đây.

283
00:19:51,940 --> 00:19:57,250
Sau đó, tôi sẽ nói setPreNext này,

284
00:19:57,250 --> 00:20:02,170
và sau đó tham số sẽ là DisHid.

285
00:20:04,370 --> 00:20:07,970
Đó là nó. Vì vậy, với sự thay đổi này,

286
00:20:07,970 --> 00:20:11,155
những gì xảy ra là mỗi khi món ăn của tôi được cập

287
00:20:11,155 --> 00:20:17,085
nhật, tôi sẽ cập nhật trước đó và tiếp theo cũng tương ứng từ đây.

288
00:20:17,085 --> 00:20:19,605
Vì vậy, với sự thay đổi nhỏ này,

289
00:20:19,605 --> 00:20:23,150
DisHid của tôi sẽ là món ăn hiện tại.

290
00:20:23,150 --> 00:20:25,530
Trước đó sẽ được chỉ vào món ăn trước đó,

291
00:20:25,530 --> 00:20:28,690
và tiếp theo sẽ được chỉ vào DisHid tiếp theo.

292
00:20:28,690 --> 00:20:31,565
Vì vậy, tôi có tất cả ba thứ tôi cần.

293
00:20:31,565 --> 00:20:37,460
Bây giờ, tôi có thể sử dụng ba giá trị này để thực hiện cách điều hướng

294
00:20:37,460 --> 00:20:43,325
giữa các món ăn trong mẫu của tôi bằng cách bao gồm một vài nút vào mẫu của tôi.

295
00:20:43,325 --> 00:20:48,775
Vì vậy, chúng ta hãy đi đến mẫu thành phần dishdetail,

296
00:20:48,775 --> 00:20:53,569
và sau đó bao gồm một vài nút cho phép tôi điều hướng giữa các món ăn.

297
00:20:53,569 --> 00:20:58,535
Đi đến thành phần Dish Detail trong khi tôi đang ở đây,

298
00:20:58,535 --> 00:21:06,150
hãy để tôi lấy NGIf này từ thẻ này và sau đó di chuyển nó vào div lên đó.

299
00:21:06,150 --> 00:21:08,445
Tôi muốn ẩn toàn bộ div,

300
00:21:08,445 --> 00:21:10,850
khi món ăn của tôi hiện không phải là khiếm khuyết,

301
00:21:10,850 --> 00:21:13,515
tương tự cho các ý kiến cũng.

302
00:21:13,515 --> 00:21:16,440
Tôi thấy điều này là một chút kinh ngạc

303
00:21:16,440 --> 00:21:19,700
khi thông tin món ăn của tôi đang được lấy từ máy chủ.

304
00:21:19,700 --> 00:21:24,945
Vì vậy, tôi sẽ thực hiện thay đổi này cho cả hai divs rằng

305
00:21:24,945 --> 00:21:32,810
một trong những hiển thị các ý kiến và một trong những khác cho thấy các chi tiết của món ăn trong thẻ.

306
00:21:32,810 --> 00:21:35,170
Với hai bản cập nhật này,

307
00:21:35,170 --> 00:21:37,210
bên trong hành động thẻ của

308
00:21:37,210 --> 00:21:38,605
tôi, Tôi sẽ bao gồm

309
00:21:38,605 --> 00:21:49,165
một nút khác của loại nút rõ ràng và nút này,

310
00:21:49,165 --> 00:21:55,165
Tôi sẽ bao gồm RouterLink.

311
00:21:55,165 --> 00:21:57,320
Khi bạn nhìn thấy liên kết bộ định tuyến,

312
00:21:57,320 --> 00:21:58,775
bạn ngay lập tức nói, “Ồ,

313
00:21:58,775 --> 00:22:00,620
tôi biết bạn đang cố gắng làm gì.

314
00:22:00,620 --> 00:22:04,890
Bạn đang cố gắng chuyển đổi nút này để có thể điều hướng giữa các

315
00:22:04,890 --> 00:22:11,720
thành phần khác nhau trong dịch vụ của tôi.”

316
00:22:11,720 --> 00:22:14,000
Vì vậy, đối với RouterLink,

317
00:22:14,000 --> 00:22:22,870
tôi sẽ cung cấp một mảng các giá trị và mảng các giá trị cho RouterLink,

318
00:22:22,870 --> 00:22:27,135
tôi sẽ làm dishdetail.

319
00:22:27,135 --> 00:22:30,665
Ngoài ra, phần thứ hai.

320
00:22:30,665 --> 00:22:33,330
Thấy chưa, đây là phần thú vị.

321
00:22:33,330 --> 00:22:37,125
Phần thứ hai của mảng này sẽ là prev,

322
00:22:37,125 --> 00:22:43,090
đó là biến mà tôi khai báo trong thành phần của tôi.

323
00:22:43,090 --> 00:22:52,905
Vì vậy, với điều này, nút này sẽ trở thành một liên kết đến món ăn trước đó trong danh sách các món ăn của tôi.

324
00:22:52,905 --> 00:22:55,615
Spiffy, phải không?

325
00:22:55,615 --> 00:23:01,010
Vậy, với điều đó, còn gì nữa?

326
00:23:02,010 --> 00:23:07,550
Hãy để tôi đóng nút ở đây và sau đó bên trong nút,

327
00:23:07,550 --> 00:23:16,890
Tôi sẽ sử dụng một biểu tượng Font Awesome

328
00:23:22,360 --> 00:23:26,550
fa chevron-trái.

329
00:23:32,670 --> 00:23:37,935
Vậy, đúng vậy. Nút này sẽ là một nút có biểu tượng ở đó.

330
00:23:37,935 --> 00:23:40,605
Vì vậy, bây giờ chúng ta có một nút ở đây,

331
00:23:40,605 --> 00:23:43,465
tôi cũng sẽ bao gồm một nút khác ở đây.

332
00:23:43,465 --> 00:23:44,880
Trước khi tôi bao gồm các nút,

333
00:23:44,880 --> 00:23:50,330
tôi sẽ làm span lớp flex-spacer,

334
00:23:50,330 --> 00:23:55,210
bạn thấy tôi sử dụng flex-spacer trong một trong những bài tập trước đó.

335
00:23:55,210 --> 00:23:56,855
Vì vậy, bạn thấy những gì tôi đang làm,

336
00:23:56,855 --> 00:24:00,695
tôi đang kéo dài để bao gồm nút thứ hai.

337
00:24:00,695 --> 00:24:02,270
Vì vậy, đối với nút thứ hai,

338
00:24:02,270 --> 00:24:05,040
tôi chỉ cần sao chép này

339
00:24:06,780 --> 00:24:13,190
và sau đó dán nó ở đó và sau đó cập nhật này để nói prev.

340
00:24:13,190 --> 00:24:16,730
Thay vì trước đó, tôi sẽ đi tiếp theo và sau đó

341
00:24:16,730 --> 00:24:23,335
fa-chevron-trái sang fa-chevron-phải, và đó là nó.

342
00:24:23,335 --> 00:24:28,049
Hãy lưu các thay đổi đối với thành phần Dish Detail Components của chúng tôi,

343
00:24:28,049 --> 00:24:30,760
và cũng là các tập tin còn lại.

344
00:24:30,760 --> 00:24:35,340
Sau khi cập nhật này, chúng ta hãy đi và kiểm tra những gì ứng dụng của chúng tôi làm.

345
00:24:35,340 --> 00:24:38,065
Đi đến ứng dụng của tôi trong trình duyệt,

346
00:24:38,065 --> 00:24:40,500
chúng ta hãy đi đến thành phần Menu.

347
00:24:40,500 --> 00:24:46,240
Chúng tôi thấy Menu và chúng ta hãy chọn một mục từ Menu ở đây.

348
00:24:46,240 --> 00:24:53,270
Vì vậy, lưu ý rằng bây giờ mục này từ món ăn menu được hiển thị ở đây.

349
00:24:53,270 --> 00:24:55,225
Chú ý ở phía dưới,

350
00:24:55,225 --> 00:24:58,835
chúng tôi có hai nút ở đây, trái và phải.

351
00:24:58,835 --> 00:25:01,440
Khi chúng ta nhấp vào nút bên trái,

352
00:25:01,440 --> 00:25:08,875
lưu ý cách chúng ta có thể di chuyển đến món ăn trước đó trong danh sách các món ăn.

353
00:25:08,875 --> 00:25:15,515
Tôi có thể tiếp tục làm trái một lần nữa và tiếp tục điều hướng sang trái và bên phải.

354
00:25:15,515 --> 00:25:17,980
Chú ý rằng khi

355
00:25:17,980 --> 00:25:22,655
tôi làm điều này, quan điểm thực tế của tôi không nhận được tải lại,

356
00:25:22,655 --> 00:25:25,190
thay vào đó tôi sẽ chỉ lấy

357
00:25:25,190 --> 00:25:34,955
dữ liệu liên quan đến đĩa từ dịch vụ và sau đó cập nhật xem của tôi ở đây.

358
00:25:34,955 --> 00:25:38,350
Lý do chúng ta có thể làm điều này là bởi vì chúng ta

359
00:25:38,350 --> 00:25:43,445
có thể quan sát được, các tham số quan sát được.

360
00:25:43,445 --> 00:25:45,890
Vì vậy, bất cứ khi nào tôi nhấp vào hai,

361
00:25:45,890 --> 00:25:48,860
trái và phải, các tham số quan sát được,

362
00:25:48,860 --> 00:25:56,620
chú ý làm thế nào tại thời điểm này địa chỉ cho thấy dishdetail zero.

363
00:25:56,620 --> 00:25:58,315
Nếu tôi bấm vào bên phải,

364
00:25:58,315 --> 00:26:02,925
sau đó sẽ được cập nhật từ dishdetail zero để dishdetail một.

365
00:26:02,925 --> 00:26:07,560
Thay đổi thông số đó, và điều đó sẽ khiến tôi quan sát được

366
00:26:07,560 --> 00:26:12,245
và lấy món ăn mới từ dịch vụ món ăn.

367
00:26:12,245 --> 00:26:14,980
Sau đó, món ăn mới được lấy,

368
00:26:14,980 --> 00:26:20,285
biến món ăn trong thành phần của tôi được cập nhật,

369
00:26:20,285 --> 00:26:21,885
và khi được cập nhật,

370
00:26:21,885 --> 00:26:23,640
chế độ xem của tôi cũng được cập nhật.

371
00:26:23,640 --> 00:26:28,185
Vì vậy, lưu ý rằng tôi đang sử dụng cùng một cái nhìn,

372
00:26:28,185 --> 00:26:36,440
tôi có thể điều hướng trong số các món ăn khác nhau là một phần trong danh sách các món ăn của tôi.

373
00:26:36,440 --> 00:26:42,470
Đây là phần thú vị mà bạn có thể nhận được bằng cách sử dụng các tham số có

374
00:26:42,470 --> 00:26:49,250
thể quan sát được từ activator.service trong ứng dụng Angular của bạn.

375
00:26:49,250 --> 00:26:56,355
Cách thú vị để sử dụng các hóa đơn quan sát được ứng dụng Angular của chúng tôi.

376
00:26:56,355 --> 00:26:59,640
Tất nhiên, theo cách tôi đã thực hiện nó,

377
00:26:59,640 --> 00:27:03,210
tôi đã làm nó một chút của một cách giả tạo để làm việc.

378
00:27:03,210 --> 00:27:07,965
Tôi đã phải nắm giữ danh sách các ID món ăn.

379
00:27:07,965 --> 00:27:12,760
Tôi đã phải sửa đổi trước đó và tiếp theo và như vậy.

380
00:27:12,760 --> 00:27:16,360
Nếu bạn có một cách để có được

381
00:27:16,360 --> 00:27:20,000
giá trị trước đó và tiếp theo tự động từ dịch vụ của bạn,

382
00:27:20,000 --> 00:27:22,015
bất cứ khi nào bạn lấy một món ăn,

383
00:27:22,015 --> 00:27:26,895
thì việc thực hiện điểm số sẽ trở nên dễ dàng hơn một chút.

384
00:27:26,895 --> 00:27:28,705
Ngay bây giờ chúng ta không có điều đó.

385
00:27:28,705 --> 00:27:33,430
Vì vậy, tôi đã làm việc xung quanh vấn đề bởi vì tôi chỉ muốn minh họa cách

386
00:27:33,430 --> 00:27:38,855
sử dụng một quan sát như thế này trong ứng dụng Angular của bạn.

387
00:27:38,855 --> 00:27:43,270
Nếu chúng ta có thể thực hiện dịch vụ sẽ trả lại giá trị

388
00:27:43,270 --> 00:27:47,320
trước đó và giá trị tiếp theo bất cứ khi nào chúng ta lấy một món ăn,

389
00:27:47,320 --> 00:27:53,640
thì tất cả đau đầu này sẽ được giải quyết đơn giản hơn rất nhiều.

390
00:27:53,640 --> 00:27:58,810
Hãy trì hoãn ý tưởng đó đến giai đoạn sau.

391
00:27:58,810 --> 00:28:01,930
Nhưng tại thời điểm này, bạn thấy làm thế nào chúng ta đang

392
00:28:01,930 --> 00:28:05,250
sử dụng các tham số có thể quan sát được để thực hiện

393
00:28:05,250 --> 00:28:12,605
một cách thú vị để hỗ trợ một tính năng mới trong ứng dụng Angular của chúng tôi.

394
00:28:12,605 --> 00:28:16,325
Điều này hoàn thành bài tập này.

395
00:28:16,325 --> 00:28:24,000
Đâ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 RXJS Phần hai.