1
00:00:00,000 --> 00:00:04,740
[MUSIC]

2
00:00:04,740 --> 00:00:09,772
Sử dụng Bộ định tuyến góc, chúng tôi đã học được cách chúng tôi có thể điều hướng

3
00:00:09,772 --> 00:00:15,673
từ chế độ xem này sang chế độ xem khác bằng cách sử dụng chỉ thị liên kết bộ định tuyến để xác định liên kết.

4
00:00:15,673 --> 00:00:21,823
Và cũng là mô-đun bộ định tuyến, cho phép chúng tôi với đặc điểm kỹ thuật của đường dẫn,

5
00:00:21,823 --> 00:00:26,715
để điều hướng đến quan điểm của các thành phần khác nhau.

6
00:00:26,715 --> 00:00:31,265
Bây giờ, chúng ta hãy lấy một ví dụ về thành phần dishdetail.

7
00:00:31,265 --> 00:00:36,680
Cho đến nay, thành phần dishdetail đã hoạt động bằng cách nhận được các chi tiết

8
00:00:36,680 --> 00:00:42,270
của món ăn cụ thể mà nó cần để hiển thị từ thành phần menu.

9
00:00:42,270 --> 00:00:47,211
Nhưng điều này đã được tạo điều kiện bởi vì thành phần dishdetail có một tài sản

10
00:00:47,211 --> 00:00:49,290
được gửi trong giá trị.

11
00:00:49,290 --> 00:00:52,201
Và sau đó chúng tôi đã sử dụng trang trí đầu vào cho

12
00:00:52,201 --> 00:00:57,027
các biến bên trong thành phần dishdetail để có được giữ của giá trị đó

13
00:00:57,027 --> 00:01:00,800
đã được thông qua từ thành phần menu.

14
00:01:00,800 --> 00:01:06,120
Bây giờ, khi bạn có các thành phần này được định tuyến để sử dụng một bộ định tuyến,

15
00:01:06,120 --> 00:01:10,440
kết nối này giữa các thành phần không còn tồn tại.

16
00:01:10,440 --> 00:01:13,995
Vì vậy, chúng ta cần phải tận dụng bộ định tuyến góc để có thể truyền

17
00:01:13,995 --> 00:01:17,560
thông tin từ thành phần này sang thành phần khác.

18
00:01:17,560 --> 00:01:22,140
Và điều này thường được thực hiện dưới dạng tham số.

19
00:01:22,140 --> 00:01:25,940
Các tham số có thể được chỉ định là tham số tuyến đường,

20
00:01:25,940 --> 00:01:29,600
vì chúng ta sẽ học một chút sau đó, hoặc tham số truy vấn.

21
00:01:31,480 --> 00:01:34,320
Vì vậy, đối với Angular Router, những gì chúng tôi đã học được cho

22
00:01:34,320 --> 00:01:38,890
đến nay là các đường dẫn được chỉ định như một URL.

23
00:01:38,890 --> 00:01:43,532
Giả sử bạn cần phải truyền một giá trị tham số từ thành phần này sang thành

24
00:01:43,532 --> 00:01:44,980
phần khác.

25
00:01:44,980 --> 00:01:46,820
Vậy làm thế nào để làm điều đó?

26
00:01:46,820 --> 00:01:50,550
Bây giờ, cách duy nhất bạn đang giao tiếp giữa các thành phần

27
00:01:50,550 --> 00:01:52,125
là bằng cách sử dụng liên kết bộ định tuyến.

28
00:01:52,125 --> 00:01:54,570
và/hoặc

29
00:01:54,570 --> 00:01:58,820
sử dụng mô-đun bộ định tuyến để thực hiện điều hướng từ thành phần này sang thành phần khác.

30
00:01:58,820 --> 00:02:06,370
Bây giờ, đây là nơi mà khả năng xác định các giá trị tham số trong URL cho

31
00:02:06,370 --> 00:02:12,070
một thành phần, đường dẫn cho một thành phần, cho phép chúng ta vượt qua thông tin này.

32
00:02:12,070 --> 00:02:16,690
Vì vậy, ví dụ, nếu chúng ta muốn có thể hiển thị một món ăn

33
00:02:16,690 --> 00:02:20,450
với một id 42 trong thành phần dishdetail.

34
00:02:20,450 --> 00:02:25,680
Nếu chúng ta có khả năng xác định một cái gì đó như /dishdetail/42.

35
00:02:25,680 --> 00:02:31,780
Và sau đó để cho dishdetail nhận số 42 từ URL trực tiếp.

36
00:02:31,780 --> 00:02:37,000
Sau đó, chúng tôi đã tạo điều kiện cho một cơ chế để truyền tải thông tin này

37
00:02:37,000 --> 00:02:42,710
một thành phần để một thành phần khác khi chúng tôi đang điều hướng đến thành phần khác.

38
00:02:42,710 --> 00:02:47,389
Đây là những gì trong mô-đun Angular Router được gọi là một tham số tuyến đường.

39
00:02:48,560 --> 00:02:50,400
Làm thế nào để một tham số tuyến đường hoạt động?

40
00:02:50,400 --> 00:02:54,410
Vì vậy, khi bạn chỉ định một tham số route trong định nghĩa đường dẫn,

41
00:02:54,410 --> 00:02:57,260
tham số route này được xác định bằng cách sử dụng một token.

42
00:02:57,260 --> 00:03:02,300
Vì vậy, khi bạn chỉ định đường dẫn trong đặc tả đường dẫn cho

43
00:03:02,300 --> 00:03:05,600
các tuyến đường, bạn sẽ chỉ định một đường dẫn như thế này.

44
00:03:05,600 --> 00:03:09,952
Vì vậy, bạn sẽ nói, dishdetail/:id

45
00:03:09,952 --> 00:03:14,750
Vì vậy, nơi id trở thành mã thông báo mà mang

46
00:03:14,750 --> 00:03:18,359
tham số route đến các thành phần cụ thể.

47
00:03:18,359 --> 00:03:21,200
Thành phần dishdetail trong ví dụ này.

48
00:03:21,200 --> 00:03:25,002
Vì vậy, theo cách này, bạn có thể chỉ định một tham số tuyến đường trong đường dẫn.

49
00:03:25,002 --> 00:03:30,098
Và sau đó từ một vị trí khác, bạn có thể chuyển tham số

50
00:03:30,098 --> 00:03:34,810
đến thành phần cụ thể cần tham số này.

51
00:03:34,810 --> 00:03:37,240
Thành phần dishdetail trong ví dụ này.

52
00:03:38,810 --> 00:03:42,510
Bây giờ, câu hỏi quan trọng tiếp theo sẽ nảy sinh trong tâm trí của bạn là,

53
00:03:42,510 --> 00:03:44,610
làm thế nào để chúng ta vượt qua tham số tuyến đường này?

54
00:03:44,610 --> 00:03:50,134
Bây giờ, khi bạn nghĩ về nó, khi bạn điều hướng thông qua các thành phần dishdetail.

55
00:03:50,134 --> 00:03:55,255
Bạn đang đến từ một thành phần khác bằng cách nhấp vào một liên kết hoặc sử dụng một

56
00:03:55,255 --> 00:04:01,020
cái gì đó gọi là chức năng điều hướng như mô-đun tuyến đường cung cấp cho chúng tôi.

57
00:04:01,020 --> 00:04:06,240
Chúng ta sẽ xem xét cả hai cách điều hướng đến một thành phần cụ thể.

58
00:04:06,240 --> 00:04:11,222
Bây giờ, nếu bạn cần chỉ định tham số tuyến đường, khi bạn chỉ định liên kết, hãy

59
00:04:11,222 --> 00:04:16,070
nhớ lại rằng chúng tôi đã chỉ định liên kết bằng cách sử dụng

60
00:04:16,070 --> 00:04:20,750
chỉ thị liên kết bộ định tuyến trong các tệp mẫu của chúng tôi.

61
00:04:20,750 --> 00:04:23,470
Bây giờ, nếu bạn định chỉ định điều này trong các tập tin mẫu,

62
00:04:23,470 --> 00:04:29,040
sau đó liên kết router cũng mất trong một mảng như chúng ta thấy. M@@

63
00:04:29,040 --> 00:04:31,500
ột mảng tham số liên kết,

64
00:04:31,500 --> 00:04:35,170
nơi bạn có thể xác định rõ ràng tham số đang được chuyển tiếp.

65
00:04:35,170 --> 00:04:40,480
Vì vậy, ví dụ, trong ví dụ này mà bạn thấy ở đây, chúng tôi đang chỉ định một.

66
00:04:40,480 --> 00:04:42,850
và sau đó bạn đang làm một NGFor.

67
00:04:42,850 --> 00:04:47,723
Vì vậy, bạn đang looping thông qua một tập hợp các đối tượng JavaScript trong

68
00:04:47,723 --> 00:04:50,720
một mảng đối tượng JavaScript.

69
00:04:50,720 --> 00:04:52,860
Sau đó, khi bạn chỉ định liên kết bộ định tuyến.

70
00:04:52,860 --> 00:04:55,770
Vì vậy, trong đó, bạn có thể chỉ định liên kết bộ định tuyến.

71
00:04:55,770 --> 00:04:58,260
Nhưng bây giờ, được bao quanh bởi dấu ngoặc vuông.

72
00:04:58,260 --> 00:05:05,150
Và điều này sẽ mất trong một giá trị như thế này có một mảng tham số liên kết.

73
00:05:05,150 --> 00:05:08,768
Vì vậy, ở đây, bạn có thể chỉ định các phần khác nhau của tham số liên kết.

74
00:05:08,768 --> 00:05:15,370
Và Angular Router sẽ kết hợp chúng với nhau để tạo thành URL thực tế.

75
00:05:15,370 --> 00:05:19,300
Vì vậy, ở đây, bạn có thể thấy rằng phần đầu tiên của tham số liên kết được chỉ định

76
00:05:19,300 --> 00:05:23,640
như một chuỗi ở đây, vì vậy /dishdetail ở đây.

77
00:05:23,640 --> 00:05:28,970
Nhưng phần thứ hai được xác định như là một giá trị mà đang được thu được

78
00:05:28,970 --> 00:05:30,070
từ món ăn.

79
00:05:31,130 --> 00:05:38,710
Đó là món ăn, đối tượng JavaScript từ mảng đối tượng JavaScript ở đây.

80
00:05:38,710 --> 00:05:41,204
Vì vậy, mỗi món ăn sẽ mang theo một dish.id.

81
00:05:41,204 --> 00:05:44,090
Vì vậy, dish.id có thể được xác định là

82
00:05:44,090 --> 00:05:47,640
một trong các giá trị trong mảng tham số liên kết này ở đây.

83
00:05:47,640 --> 00:05:52,170
Vì vậy, khi bạn nhấp vào điều này, cho các món ăn cụ thể,

84
00:05:52,170 --> 00:05:57,130
dish.id này sẽ được thay thế bởi id cụ thể cho món ăn.

85
00:05:57,130 --> 00:06:01,890
Vì vậy, ví dụ, nếu id là 42, thì điều này sẽ được thay thế bằng 42.

86
00:06:01,890 --> 00:06:06,779
Vì vậy, khi Router góc nhận được liên kết router này,

87
00:06:06,779 --> 00:06:11,783
sau đó nó sẽ xây dựng URL như /dishdetail/42.

88
00:06:11,783 --> 00:06:17,010
42 là giá trị của dish.id tại thời điểm này.

89
00:06:17,010 --> 00:06:19,630
Vì vậy, đó là cách bạn có thể vượt qua trong tham số.

90
00:06:19,630 --> 00:06:21,500
Phần thứ hai của câu hỏi, tất nhiên,

91
00:06:21,500 --> 00:06:27,790
là làm thế nào để thành phần lấy giá trị này từ tham số liên kết?

92
00:06:27,790 --> 00:06:30,130
Điều đó chúng ta sẽ nói về trong slide tiếp theo.

93
00:06:31,320 --> 00:06:36,380
Một cách khác mà bạn có thể gây ra điều hướng này đến thành phần khác

94
00:06:36,380 --> 00:06:42,380
cũng là sử dụng một phương pháp gọi là điều hướng được cung cấp bởi mô-đun bộ định tuyến.

95
00:06:42,380 --> 00:06:44,740
Vì vậy, bạn có thể nói, this.router.navigate.

96
00:06:44,740 --> 00:06:47,888
Vì vậy, điều này có thể được bao gồm trong mã TypeScript

97
00:06:47,888 --> 00:06:53,250
của bạn hoặc mã JavaScript của bạn để tự động gây ra điều hướng đến khác.

98
00:06:53,250 --> 00:06:58,337
Vì vậy, điều này có thể được bao gồm bên trong một phương thức mà bạn

99
00:06:58,337 --> 00:07:03,432
bao gồm trong mã TypeScript của thành phần của bạn.

100
00:07:03,432 --> 00:07:08,575
Và điều đó có thể được gọi từ mẫu của bạn.

101
00:07:08,575 --> 00:07:11,921
Ví dụ, bằng cách nhấp vào một liên kết ở đó.

102
00:07:11,921 --> 00:07:17,097
Vì vậy, trong đó trong mã, bạn có thể bao gồm một tuyên bố như thế này,

103
00:07:17,097 --> 00:07:19,582
this.router.navigate.

104
00:07:19,582 --> 00:07:24,152
Và phương pháp điều hướng này lấy cùng một mảng tham số liên

105
00:07:24,152 --> 00:07:27,466
kết như giá trị tham số.

106
00:07:27,466 --> 00:07:33,056
Vì vậy, điều này cũng sẽ cho phép thông tin này được cung cấp cho các bộ định tuyến góc để

107
00:07:33,056 --> 00:07:37,186
nó có thể điều hướng đến các thành phần khác.

108
00:07:37,186 --> 00:07:43,246
Bây giờ, chúng ta hãy đi đến phía bên kia của phương trình này.

109
00:07:43,246 --> 00:07:50,466
Làm thế nào để một thành phần, giống như thành phần dishdetail trong ví dụ này,

110
00:07:50,466 --> 00:07:57,821
lấy giá trị này được chỉ định như là mã thông báo trong liên kết URL ở đó?

111
00:07:57,821 --> 00:08:02,789
Bây giờ, đây là nơi thư viện Angular Router cung cấp

112
00:08:02,789 --> 00:08:07,940
một dịch vụ được gọi là dịch vụ ActivateDroute.

113
00:08:07,940 --> 00:08:12,913
Dịch vụ ActivateDroute này có thể được tận dụng để có thể lấy

114
00:08:12,913 --> 00:08:14,360
các giá trị này.

115
00:08:14,360 --> 00:08:18,556
Bây giờ, đặc biệt, để tạo thuận lợi cho việc truy xuất tham số này,

116
00:08:18,556 --> 00:08:22,689
dịch vụ ActiveDroute cung cấp ba điều khác nhau.

117
00:08:22,689 --> 00:08:29,140
Ví dụ, nó cung cấp phương pháp này để lấy URL.

118
00:08:29,140 --> 00:08:32,198
Đó là một quan sát của con đường tuyến đường.

119
00:08:32,198 --> 00:08:37,085
Mà được biểu diễn dưới dạng một mảng các chuỗi cho mỗi đường dẫn tuyến đường.

120
00:08:37,085 --> 00:08:39,271
Bạn đã gặp phải từ này quan sát được ở đây.

121
00:08:39,271 --> 00:08:41,770
Trong thời điểm này, hãy giữ lấy từ đó.

122
00:08:41,770 --> 00:08:46,250
Chúng tôi sẽ trở lại, nhìn vào những gì một quan sát được trong mô-đun tiếp theo.

123
00:08:46,250 --> 00:08:49,190
Nhưng cho thời điểm này, những gì chúng tôi nhận ra là

124
00:08:49,190 --> 00:08:52,430
dịch vụ ActivateDroute này cung cấp điều này có thể quan sát được.

125
00:08:53,970 --> 00:08:58,920
Tương tự, dịch vụ ActiveDroute cũng cung cấp một tham số khác có thể quan sát được gọi là tham số. Tham số

126
00:08:58,920 --> 00:09:03,920
này quan sát làm cho có sẵn cho một thành phần

127
00:09:03,920 --> 00:09:07,990
các giá trị tham số đang được thông qua như là các tham số tuyến đường.

128
00:09:07,990 --> 00:09:12,260
Vì vậy, tham số này quan sát được là một trong những mà chúng ta sẽ sử dụng

129
00:09:12,260 --> 00:09:15,740
để lấy giá trị này trong thành phần dishdetail.

130
00:09:15,740 --> 00:09:18,290
Bạn sẽ thấy phương pháp chính xác của việc thực hiện điều đó

131
00:09:18,290 --> 00:09:21,860
trong bài tập sau bài giảng này.

132
00:09:21,860 --> 00:09:29,740
Tương tự như vậy, bạn cũng có thể truyền trong tham số truy vấn cho một thành phần khác.

133
00:09:29,740 --> 00:09:33,185
Bây giờ, chúng ta sẽ không đối phó với một ví dụ về các tham số truy vấn ngay bây giờ.

134
00:09:33,185 --> 00:09:39,480
Nhưng sau đó, chúng ta có thể gặp một ví dụ về cách bạn có thể chuyển tham

135
00:09:39,480 --> 00:09:46,010
số truy vấn thông qua dịch vụ ActiveDRoute sang một thành phần khác.

136
00:09:46,010 --> 00:09:50,870
Với sự hiểu biết này, chúng ta hãy đi trước bài tập tiếp theo.

137
00:09:50,870 --> 00:09:54,790
Chúng tôi sẽ tiếp tục phát triển ứng dụng trang đơn.

138
00:09:54,790 --> 00:09:59,517
Và sau đó cho phép sử dụng một tham số tuyến đường để vượt qua

139
00:09:59,517 --> 00:10:03,605
trong id của một món ăn để thành phần dishdetail.

140
00:10:03,605 --> 00:10:09,990
Vì vậy mà các thành phần dishdetail, lần lượt, có thể sử dụng id này để truy vấn các dịch vụ món ăn.

141
00:10:09,990 --> 00:10:14,280
Để có được các chi tiết của món ăn cụ thể mà nó được

142
00:10:14,280 --> 00:10:17,406
cho là hiển thị trong tầm nhìn của nó.

143
00:10:17,406 --> 00:10:24,269
[ NHẠC]