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

2
00:00:04,740 --> 00:00:09,772
Используя угловой маршрутизатор, мы уже узнали, как можно перемещаться

3
00:00:09,772 --> 00:00:15,673
из одного представления в другой, используя директиву связи маршрутизатора, чтобы указать канал.

4
00:00:15,673 --> 00:00:21,823
А также модуль маршрутизатора, позволяющий нам со спецификацией пути,

5
00:00:21,823 --> 00:00:26,715
для навигации к представлениям различных компонентов.

6
00:00:26,715 --> 00:00:31,265
Теперь давайте рассмотрим пример компонента dishdetail.

7
00:00:31,265 --> 00:00:36,680
До сих пор компонент dishdetails работал, получая детали

8
00:00:36,680 --> 00:00:42,270
конкретного блюда, которое он должен отображать из компонента меню.

9
00:00:42,270 --> 00:00:47,211
Но это было облегчено, потому что компонент dishdetail имел свойство

10
00:00:47,211 --> 00:00:49,290
, которое отправляло значение.

11
00:00:49,290 --> 00:00:52,201
И затем мы использовали входной декоратор для

12
00:00:52,201 --> 00:00:57,027
переменной внутри компонента dishdetail, чтобы получить значение, которое

13
00:00:57,027 --> 00:01:00,800
передается из компонента меню.

14
00:01:00,800 --> 00:01:06,120
Теперь, когда эти компоненты направляются на маршрутизатор,

15
00:01:06,120 --> 00:01:10,440
это соединение между компонентами больше не существует.

16
00:01:10,440 --> 00:01:13,995
Поэтому нам нужно использовать Угловой маршрутизатор, чтобы иметь возможность передавать

17
00:01:13,995 --> 00:01:17,560
информацию от одного компонента к другому компоненту.

18
00:01:17,560 --> 00:01:22,140
И это обычно делается в виде параметров.

19
00:01:22,140 --> 00:01:25,940
Параметры, которые могут быть указаны как параметры маршрута,

20
00:01:25,940 --> 00:01:29,600
, как мы узнаем немного позже, или параметры запроса.

21
00:01:31,480 --> 00:01:34,320
Итак, для углового маршрутизатора, то, что мы узнали до сих пор

22
00:01:34,320 --> 00:01:38,890
, заключается в том, что все пути указаны как URL.

23
00:01:38,890 --> 00:01:43,532
Предположим, что вам нужно передать значение параметра из одного компонента в

24
00:01:43,532 --> 00:01:44,980
другой компонент.

25
00:01:44,980 --> 00:01:46,820
Тогда как нам это сделать?

26
00:01:46,820 --> 00:01:50,550
Теперь единственный способ общения между компонентами

27
00:01:50,550 --> 00:01:52,125
- это использование связи маршрутизатора.

28
00:01:52,125 --> 00:01:54,570
И/или

29
00:01:54,570 --> 00:01:58,820
используйте модуль маршрутизатора для перехода от одного компонента к другому.

30
00:01:58,820 --> 00:02:06,370
Теперь, это где возможность указать значения параметров в URL для

31
00:02:06,370 --> 00:02:12,070
компонента, путь для компонента, позволяет передавать эту информацию.

32
00:02:12,070 --> 00:02:16,690
Так, например, если мы хотим иметь возможность отображать блюдо

33
00:02:16,690 --> 00:02:20,450
с идентификатором 42 в компоненте dishdetail.

34
00:02:20,450 --> 00:02:25,680
Если бы у нас была возможность указать что-то вроде /dishdetail/42.

35
00:02:25,680 --> 00:02:31,780
И затем пусть dishdetail забрать номер 42 из URL напрямую.

36
00:02:31,780 --> 00:02:37,000
Тогда мы облегчили механизм передачи этой информации

37
00:02:37,000 --> 00:02:42,710
один компонент другому компоненту, когда мы переходим к другому компоненту.

38
00:02:42,710 --> 00:02:47,389
Это то, что в модуле углового маршрутизатора называется параметром маршрута.

39
00:02:48,560 --> 00:02:50,400
Как работает параметр маршрута?

40
00:02:50,400 --> 00:02:54,410
Таким образом, когда вы указываете параметр маршрута в определении пути,

41
00:02:54,410 --> 00:02:57,260
этот параметр маршрута задается с помощью маркера.

42
00:02:57,260 --> 00:03:02,300
Поэтому, когда вы указываете путь в спецификации пути для

43
00:03:02,300 --> 00:03:05,600
маршрутов, вы указываете такой путь.

44
00:03:05,600 --> 00:03:09,952
Так вы бы сказали, dishdetail/:id.

45
00:03:09,952 --> 00:03:14,750
Таким образом, где id становится маркером, который несет параметр маршрута

46
00:03:14,750 --> 00:03:18,359
к конкретному компоненту.

47
00:03:18,359 --> 00:03:21,200
Компонент dishdetail в этом примере.

48
00:03:21,200 --> 00:03:25,002
Таким образом, вы можете указать параметр маршрута в пути.

49
00:03:25,002 --> 00:03:30,098
А затем из другого места можно передать параметр

50
00:03:30,098 --> 00:03:34,810
конкретному компоненту, которому нужен этот параметр.

51
00:03:34,810 --> 00:03:37,240
Компонент dishdetail в этом примере.

52
00:03:38,810 --> 00:03:42,510
Теперь следующий важный вопрос, который возникнет в вашем сознании, -

53
00:03:42,510 --> 00:03:44,610
как мы передаем этот параметр маршрута?

54
00:03:44,610 --> 00:03:50,134
Теперь, когда вы подумаете об этом, когда вы перемещаетесь по компоненту dishdetail.

55
00:03:50,134 --> 00:03:55,255
Вы приходите из другого компонента, либо щелкнув ссылку, либо используя

56
00:03:55,255 --> 00:04:01,020
что-то, называемое функцией навигации, как модуль маршрута предоставляет для нас.

57
00:04:01,020 --> 00:04:06,240
Рассмотрим оба способа перехода к определенному компоненту.

58
00:04:06,240 --> 00:04:11,222
Теперь, если вам нужно указать параметр маршрута, при указании ссылки,

59
00:04:11,222 --> 00:04:16,070
напомним, что мы указывали ссылку с помощью директивы router link

60
00:04:16,070 --> 00:04:20,750
в наших файлах шаблонов.

61
00:04:20,750 --> 00:04:23,470
Теперь, если вы собираетесь указать это в файлах шаблонов,

62
00:04:23,470 --> 00:04:29,040
, то ссылка маршрутизатора также принимает в массив, как мы видим.

63
00:04:29,040 --> 00:04:31,500
Массив параметров связи,

64
00:04:31,500 --> 00:04:35,170
, где можно явно указать передаваемый параметр.

65
00:04:35,170 --> 00:04:40,480
Так, например, в этом примере, который вы видите здесь, мы указываем.

66
00:04:40,480 --> 00:04:42,850
А затем вы делаете ngFor.

67
00:04:42,850 --> 00:04:47,723
Таким образом, вы просматриваете набор объектов JavaScript в

68
00:04:47,723 --> 00:04:50,720
массиве объектов JavaScript.

69
00:04:50,720 --> 00:04:52,860
Затем при указании маршрутизатора ссылка.

70
00:04:52,860 --> 00:04:55,770
Таким образом, внутри вы можете указать ссылку маршрутизатора.

71
00:04:55,770 --> 00:04:58,260
Но теперь, в окружении квадратных скобок.

72
00:04:58,260 --> 00:05:05,150
И это будет принимать значение, подобное этому, имеет массив параметров ссылки.

73
00:05:05,150 --> 00:05:08,768
Таким образом, здесь вы можете указать различные части параметра link.

74
00:05:08,768 --> 00:05:15,370
И Угловой маршрутизатор объединит их вместе, чтобы сформировать фактический URL.

75
00:05:15,370 --> 00:05:19,300
Итак, здесь вы можете видеть, что первая часть параметра link указана

76
00:05:19,300 --> 00:05:23,640
как строка здесь, поэтому /dishdetail здесь.

77
00:05:23,640 --> 00:05:28,970
Но вторая часть указана как значение, которое получается

78
00:05:28,970 --> 00:05:30,070
из блюда.

79
00:05:31,130 --> 00:05:38,710
Что такое блюдо, объект JavaScript из массива объектов JavaScript здесь.

80
00:05:38,710 --> 00:05:41,204
Таким образом, каждое блюдо будет нести dish.id.

81
00:05:41,204 --> 00:05:44,090
Таким образом, dish.id может быть указан как

82
00:05:44,090 --> 00:05:47,640
одно из значений в этом массиве параметров ссылки здесь.

83
00:05:47,640 --> 00:05:52,170
Поэтому, когда вы нажимаете на это, для конкретного блюда,

84
00:05:52,170 --> 00:05:57,130
это dish.id будет заменено конкретным идентификатором для блюда.

85
00:05:57,130 --> 00:06:01,890
Так, например, если id 42, то это будет заменено на 42.

86
00:06:01,890 --> 00:06:06,779
Поэтому, когда Угловой маршрутизатор получает эту ссылку маршрутизатора,

87
00:06:06,779 --> 00:06:11,783
, то он будет строить URL как /dishdetail/42.

88
00:06:11,783 --> 00:06:17,010
The 42 является значением dish.id на данный момент.

89
00:06:17,010 --> 00:06:19,630
Так вот как вы можете передать параметр.

90
00:06:19,630 --> 00:06:21,500
Вторая часть вопроса, конечно,

91
00:06:21,500 --> 00:06:27,790
- это как компонент извлекает это значение из параметра link?

92
00:06:27,790 --> 00:06:30,130
О чем мы поговорим на следующем слайде.

93
00:06:31,320 --> 00:06:36,380
Другой способ, который вы можете вызвать эту навигацию к другому компоненту

94
00:06:36,380 --> 00:06:42,380
, - это также использовать метод навигации, предоставляемый модулем маршрутизатора.

95
00:06:42,380 --> 00:06:44,740
Так вы можете сказать, это.router.navira-навигация.

96
00:06:44,740 --> 00:06:47,888
Таким образом, это может быть включено в ваш код TypeScript или

97
00:06:47,888 --> 00:06:53,250
ваш код JavaScript, чтобы автоматически вызвать навигацию к другому.

98
00:06:53,250 --> 00:06:58,337
Таким образом, это может быть включено в метод, который вы

99
00:06:58,337 --> 00:07:03,432
включаете в код TypeScript вашего компонента.

100
00:07:03,432 --> 00:07:08,575
И это можно вызвать из вашего шаблона.

101
00:07:08,575 --> 00:07:11,921
Скажем, например, нажав на ссылку там.

102
00:07:11,921 --> 00:07:17,097
Таким образом, внутри кода вы можете включить такой оператор, как это,

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

104
00:07:19,582 --> 00:07:24,152
И этот метод навигации принимает тот же массив параметров связи

105
00:07:24,152 --> 00:07:27,466
, что и значение параметра.

106
00:07:27,466 --> 00:07:33,056
Таким образом, это также позволит предоставить эту информацию угловатому маршрутизатору, чтобы

107
00:07:33,056 --> 00:07:37,186
мог перейти к другому компоненту.

108
00:07:37,186 --> 00:07:43,246
Теперь давайте перейдем к другой стороне этого уравнения.

109
00:07:43,246 --> 00:07:50,466
Как компонент, как компонент dishdetail в этом примере,

110
00:07:50,466 --> 00:07:57,821
извлекает это значение, указанное в качестве маркера в URL-ссылке?

111
00:07:57,821 --> 00:08:02,789
Теперь здесь библиотека углового маршрутизатора предоставляет

112
00:08:02,789 --> 00:08:07,940
услугу, называемую службой ActivatedRoute.

113
00:08:07,940 --> 00:08:12,913
Эта служба ActivatedRoute может быть использовано для получения

114
00:08:12,913 --> 00:08:14,360
этих значений.

115
00:08:14,360 --> 00:08:18,556
Теперь, в частности, для облегчения извлечения этого параметра,

116
00:08:18,556 --> 00:08:22,689
сервис ActivatedRoute предоставляет три разных вещи.

117
00:08:22,689 --> 00:08:29,140
Например, он предоставляет этот метод для получения URL-адреса.

118
00:08:29,140 --> 00:08:32,198
Который является наблюдаемым из пути маршрута.

119
00:08:32,198 --> 00:08:37,085
Который представлен в виде массива строк для каждого пути маршрута.

120
00:08:37,085 --> 00:08:39,271
Вы столкнулись с этим словом, наблюдаемым здесь.

121
00:08:39,271 --> 00:08:41,770
На данный момент, держись за это слово.

122
00:08:41,770 --> 00:08:46,250
Мы вернемся, посмотрим, что такое наблюдаемое в следующем модуле.

123
00:08:46,250 --> 00:08:49,190
Но на данный момент мы поняли, что эта служба

124
00:08:49,190 --> 00:08:52,430
ActivatedRoute обеспечивает эту наблюдаемую.

125
00:08:53,970 --> 00:08:58,920
Аналогичным образом, служба ActivatedRoute также предоставляет еще один наблюдаемый называется params.

126
00:08:58,920 --> 00:09:03,920
Этот наблюдаемый параметр делает доступным компоненту

127
00:09:03,920 --> 00:09:07,990
значения параметров, которые передаются в качестве параметра маршрута.

128
00:09:07,990 --> 00:09:12,260
Таким образом, этот параметр наблюдаемый является тот, который мы собираемся использовать

129
00:09:12,260 --> 00:09:15,740
для извлечения этого значения в компоненте dishdetail.

130
00:09:15,740 --> 00:09:18,290
Вы увидите точный метод этого

131
00:09:18,290 --> 00:09:21,860
в упражнении, которое следует за этой лекцией.

132
00:09:21,860 --> 00:09:29,740
Аналогично, вы также можете передать параметры запроса другому компоненту.

133
00:09:29,740 --> 00:09:33,185
Сейчас мы не будем разбираться с примером параметров запроса прямо сейчас.

134
00:09:33,185 --> 00:09:39,480
Но позже мы можем столкнуться с примером того, как вы можете передать параметры запроса

135
00:09:39,480 --> 00:09:46,010
через службу ActivatedRoute другому компоненту.

136
00:09:46,010 --> 00:09:50,870
С таким пониманием, давайте перейдем к следующему упражнению.

137
00:09:50,870 --> 00:09:54,790
Мы продолжим разработку одностраничного приложения.

138
00:09:54,790 --> 00:09:59,517
А затем включить использование параметра маршрута, чтобы передать в

139
00:09:59,517 --> 00:10:03,605
идентификатор блюда компоненту dishdetail.

140
00:10:03,605 --> 00:10:09,990
Так что компонент dishdetail, в свою очередь, может использовать этот идентификатор для запроса блюдо службы.

141
00:10:09,990 --> 00:10:14,280
Чтобы получить детали этого конкретного блюда, которое оно

142
00:10:14,280 --> 00:10:17,406
должно отображаться в его представлении.

143
00:10:17,406 --> 00:10:24,269
[МУЗЫКА]