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

2
00:00:04,965 --> 00:00:10,050
В этом упражнении мы рассмотрим, как мы можем использовать модуль маршрутизации

3
00:00:10,050 --> 00:00:14,397
Angular, чтобы иметь возможность поддерживать несколько компонентов, и

4
00:00:14,397 --> 00:00:19,830
иметь возможность перейти к любому из этих компонентов в нашем угловом приложении.

5
00:00:21,690 --> 00:00:26,280
Краткий взгляд на состояние нашего приложения.

6
00:00:26,280 --> 00:00:29,647
В конце последнего упражнения

7
00:00:29,647 --> 00:00:36,135
мы уже заметили, что в этом приложении, в заголовке

8
00:00:36,135 --> 00:00:42,520
у нас есть ссылки на четыре разных цитаты, конец кавычки страниц здесь.

9
00:00:42,520 --> 00:00:47,334
Теперь в угловых терминах, это будет поддерживаться с использованием

10
00:00:47,334 --> 00:00:52,371
различных компонентов, как мы увидим в этом упражнении.

11
00:00:52,371 --> 00:00:55,706
Итак, здесь мы видим, что когда мы нажимаем на Главная,

12
00:00:55,706 --> 00:01:01,840
мы хотим иметь возможность видеть детали того, что должно присутствовать на главной странице.

13
00:01:01,840 --> 00:01:07,182
И так же, о программе и меню конечно вы уже видите его прямо там,

14
00:01:07,182 --> 00:01:12,608
и затем Контакт, вероятно, отображает некоторую информацию о содержании для

15
00:01:12,608 --> 00:01:15,040
этого конкретного ресторана.

16
00:01:15,040 --> 00:01:18,450
Так как же они поддерживают что-то подобное?

17
00:01:18,450 --> 00:01:23,490
Во-первых, одним быстрым взглядом на него мы видим, что меню

18
00:01:23,490 --> 00:01:28,470
уже поддерживается, отображая информацию о меню здесь, а

19
00:01:28,470 --> 00:01:32,720
это уже облегчается с использованием компонента Menu.

20
00:01:32,720 --> 00:01:37,720
Таким образом, мы видим, что компонент Menu сопоставляется между заголовком и

21
00:01:37,720 --> 00:01:42,270
нижнего колонтитула и может отображать информацию прямо там.

22
00:01:42,270 --> 00:01:48,270
Теперь, как мы можем использовать модуль углового маршрутизатора, чтобы позволить

23
00:01:48,270 --> 00:01:54,270
нам поддерживать эти несколько компонентов и иметь возможность перемещаться между ними.

24
00:01:54,270 --> 00:01:58,810
Теперь, чтобы начать, сначала, конечно, нам нужно несколько компонентов,

25
00:01:58,810 --> 00:02:04,370
каждый из них показывает свое соответствующее мнение, чтобы мы могли перемещаться между взглядами.

26
00:02:04,370 --> 00:02:09,390
Итак, давайте добавим еще три компонента в наше угловое приложение,

27
00:02:09,390 --> 00:02:13,300
Дом, О и Контакт.

28
00:02:13,300 --> 00:02:17,500
Вы уже знаете, как это сделать, так что давайте перейдем к следующему шагу.

29
00:02:17,500 --> 00:02:22,959
В командной строке введите ng компонент

30
00:02:22,959 --> 00:02:28,616
home, чтобы создать домашний компонент.

31
00:02:28,616 --> 00:02:33,094
Аналогично генерировать

32
00:02:33,094 --> 00:02:38,362
о компоненте и

33
00:02:38,362 --> 00:02:43,100
также в то время как мы находимся на нем

34
00:02:43,100 --> 00:02:48,641
контактный компонент.

35
00:02:48,641 --> 00:02:53,031
Итак, теперь у нас есть три компонента, добавленные вместе с новым компонентом, который мы

36
00:02:53,031 --> 00:02:53,903
уже имеем.

37
00:02:53,903 --> 00:02:58,445
Компонент детализации диска уже используется в компонентах меню, поэтому

38
00:02:58,445 --> 00:03:00,833
мы не рассматриваем его на данный момент.

39
00:03:00,833 --> 00:03:05,652
Но теперь у нас есть домашние, о, контакты и меню компоненты, и

40
00:03:05,652 --> 00:03:08,339
нам нужен способ идти между ними.

41
00:03:08,339 --> 00:03:09,882
Так как же нам это делать?

42
00:03:09,882 --> 00:03:14,806
Так вот где я использую модуль углового маршрутизатора.

43
00:03:14,806 --> 00:03:20,618
Чтобы начать работу с модулем маршрутизатора, чтобы позволить нам перемещаться

44
00:03:20,618 --> 00:03:26,225
между этими компонентами, давайте добавим новый угловой модуль.

45
00:03:26,225 --> 00:03:32,012
Теперь этот шаблон использования модуля маршрутизатора - это то, что предлагается для

46
00:03:32,012 --> 00:03:35,841
немного более сложных угловых приложений, но

47
00:03:35,841 --> 00:03:41,735
, если мы сделаем это в качестве стандартной практики, это пойдет долгий путь, чтобы помочь нам в будущем.

48
00:03:41,735 --> 00:03:46,653
Поэтому я начинаю даже простое приложение с

49
00:03:46,653 --> 00:03:52,032
, помещающее модуль маршрутизатора в свой собственный отдельный модуль.

50
00:03:52,032 --> 00:03:58,470
Таким образом, это включает в себя все наши потребности маршрутизации в отдельный модуль.

51
00:03:58,470 --> 00:04:04,170
Чтобы начать работу, мы снова используем угловой CLI, чтобы

52
00:04:04,170 --> 00:04:10,450
создать другой модуль, и мы назовем этот модуль как маршрутизация приложений.

53
00:04:10,450 --> 00:04:15,237
Таким образом, этот модуль маршрутизации приложения, который мы собираемся создать, будет использовать

54
00:04:15,237 --> 00:04:20,599
модуль углового слоттинга для предоставления функций маршрутизации для нашего приложения.

55
00:04:20,599 --> 00:04:26,296
И затем мы будем использовать это в нашем модуле приложения, чтобы включить маршрутизацию.

56
00:04:26,296 --> 00:04:30,927
Чтобы создать новый модуль, называемый маршрутизация приложений,

57
00:04:30,927 --> 00:04:35,814
в командной строке типа ng module app-routing,

58
00:04:35,814 --> 00:04:40,960
и который должен создать модуль маршрутизации приложений и

59
00:04:40,960 --> 00:04:49,211
поместить файл app-routing.module.ts в эту конкретную папку там.

60
00:04:49,211 --> 00:04:52,635
Теперь этот модуль маршрутизации приложений просто остался там.

61
00:04:52,635 --> 00:04:58,138
Мы должны явно включить это в наш модуль приложения

62
00:04:58,138 --> 00:05:01,662
, чтобы он мог использовать его.

63
00:05:01,662 --> 00:05:06,669
Перейдя в редактор мы теперь видим, что у нас теперь есть еще одна папка здесь

64
00:05:06,669 --> 00:05:12,328
называется app-routing и внутри, что у нас есть AppRoutingModule здесь,

65
00:05:12,328 --> 00:05:18,374
мы выбираем общий угловой модуль, который угловой CLI сгенерировал для нас.

66
00:05:18,374 --> 00:05:22,034
Это не имеет ничего конкретного в маршрутизации как таковой на данный момент,

67
00:05:22,034 --> 00:05:24,737
, но мы собираемся добавить эти функции туда.

68
00:05:24,737 --> 00:05:30,633
Но, прежде чем мы это сделаем, давайте использовать этот AppRoutingModule в нашем app.module,

69
00:05:30,633 --> 00:05:34,028
корневой модуль для нашего углового приложения.

70
00:05:34,028 --> 00:05:38,271
Чтобы сделать это, откройте app.module и

71
00:05:38,271 --> 00:05:44,452
пока мы здесь, позвольте мне немного очистить здесь.

72
00:05:44,452 --> 00:05:48,489
Мне, как правило, не нравится дезорганизованный код, поэтому

73
00:05:48,489 --> 00:05:52,407
я просто собираюсь переместить весь этот код для

74
00:05:52,407 --> 00:05:57,040
компоненты вместе в одном месте и

75
00:05:57,040 --> 00:06:02,650
, тогда мне нужны мои услуги ниже.

76
00:06:02,650 --> 00:06:09,180
Теперь у нас есть новый модуль, который мы получаем

77
00:06:09,180 --> 00:06:13,846
из AppRoutingModule,

78
00:06:13,846 --> 00:06:17,764
, который мы только что создали и

79
00:06:17,764 --> 00:06:22,614
, то я собираюсь потребовать, чтобы

80
00:06:22,614 --> 00:06:27,108
AppRoutingModule в мой модуль маршрутизации

81
00:06:34,609 --> 00:06:37,040
или AppModule здесь.

82
00:06:37,040 --> 00:06:43,080
Итак, я включаю AppRoutingModule, импортировав его сначала там.

83
00:06:43,080 --> 00:06:47,625
И затем после этого, в импорт, я вхожу и

84
00:06:47,625 --> 00:06:50,880
затем добавляю в AppRoutingModule.

85
00:06:53,440 --> 00:06:56,970
Прямо там, AppRoutingModule.

86
00:06:56,970 --> 00:07:01,380
Таким образом, мой модуль приложения

87
00:07:01,380 --> 00:07:05,640
корневой модуль теперь исправлен, чтобы использовать AppRoutingModule.

88
00:07:05,640 --> 00:07:11,420
Теперь это дает мне свободу разрабатывать мою часть маршрутизации в

89
00:07:11,420 --> 00:07:18,540
моем AppRoutingModule с полной уверенностью в том, что она будет использоваться моим модулем приложения.

90
00:07:18,540 --> 00:07:21,370
Так что давайте сохраним изменения в модуле приложения, и

91
00:07:21,370 --> 00:07:25,357
тогда мы вернемся и откроем AppRoutingModule здесь.

92
00:07:26,400 --> 00:07:30,470
И здесь мы собираемся использовать

93
00:07:30,470 --> 00:07:34,050
модуль маршрутизатора, который Angular предоставляет нам.

94
00:07:34,050 --> 00:07:37,749
Итак, здесь позвольте мне импортировать,

95
00:07:41,156 --> 00:07:46,174
RouterModule здесь, а также сопутствующий модуль

96
00:07:46,174 --> 00:07:51,608
Маршруты, который доступен из Angular.

97
00:07:51,608 --> 00:07:56,428
И тогда я собираюсь импортировать это из Angular,

98
00:07:56,428 --> 00:08:00,320
, а затем, RouterModule здесь.

99
00:08:00,320 --> 00:08:04,540
Таким образом, из библиотеки углового маршрутизатора я импортирую как модуль RouterModule, так и модуль

100
00:08:04,540 --> 00:08:06,120
Маршруты.

101
00:08:06,120 --> 00:08:14,590
Поэтому, как только я это сделаю, очевидно, мне нужно иметь возможность включить RouterModule здесь.

102
00:08:14,590 --> 00:08:21,015
Поэтому в дополнение к CommonModule, который я импортировал там,

103
00:08:21,015 --> 00:08:25,330
мне также нужно использовать здесь RouterModule.

104
00:08:25,330 --> 00:08:28,803
Теперь я оставлю его на этом этапе.

105
00:08:28,803 --> 00:08:33,835
Мы разработаем маршруты для нашего углового приложения и

106
00:08:33,835 --> 00:08:38,054
затем вернемся и исправим это немного позже.

107
00:08:38,054 --> 00:08:44,225
Таким образом, позвольте мне сохранить изменения в модуле маршрутизации приложений.

108
00:08:44,225 --> 00:08:49,925
И то, что я собираюсь сделать, это просто ради того, чтобы мой код был чистым и

109
00:08:49,925 --> 00:08:56,574
организованным, я собираюсь определить все маршруты для моего приложения в другом файле.

110
00:08:56,574 --> 00:09:03,863
Но я создаю в папке маршрутизации приложений, а затем назовем его как routes.ts5.

111
00:09:03,863 --> 00:09:08,601
Теперь, внутри этого файла, я создаю все маршруты, которые мне нужны.

112
00:09:08,601 --> 00:09:12,994
Итак, здесь я собираюсь импортировать,

113
00:09:15,508 --> 00:09:23,255
Маршруты из, @angular /router,

114
00:09:23,255 --> 00:09:29,570
, а затем использовать это для построения маршрутов для моего приложения.

115
00:09:29,570 --> 00:09:33,453
Теперь, кроме того, мне нужно иметь возможность импортировать все

116
00:09:33,453 --> 00:09:37,745
компоненты, которые у меня есть в моем приложении.

117
00:09:37,745 --> 00:09:41,303
Потому что я хочу иметь возможность перейти ко всем компонентам.

118
00:09:41,303 --> 00:09:44,158
Итак, где у меня список всех компонентов?

119
00:09:44,158 --> 00:09:46,780
У меня есть их в app_module.

120
00:09:46,780 --> 00:09:48,475
Так что позвольте мне перейти к app_module.

121
00:09:50,917 --> 00:09:58,300
Я стараюсь не печатать вещи, насколько это возможно, чтобы держать вещи под контролем.

122
00:09:58,300 --> 00:10:03,720
Поэтому я перейду в app_module, а затем скопирую все компоненты, которые у меня есть.

123
00:10:03,720 --> 00:10:08,681
Мне не нужен AppComponent, потому что я не буду напрямую переходить к этому в моем приложении

124
00:10:08,681 --> 00:10:11,925
, но остальные мне понадобятся.

125
00:10:11,925 --> 00:10:18,441
Поэтому я собираюсь просто скопировать все эти и

126
00:10:18,441 --> 00:10:25,510
, а затем включить их в мой файл маршрутов, здесь.

127
00:10:25,510 --> 00:10:30,080
Итак, теперь у меня есть MenuComponent, Dishдеталь, заголовок, нога.

128
00:10:30,080 --> 00:10:33,190
На самом деле, мне также не нужны заголовки и футеркомпонент.

129
00:10:33,190 --> 00:10:34,516
Мне не нужны Header и

130
00:10:34,516 --> 00:10:39,040
FooterComponent, потому что я не собираюсь перемещаться к ним с помощью маршрутов.

131
00:10:39,040 --> 00:10:43,322
Поэтому позвольте мне удалить компоненты заголовка и нижнего колонтитула.

132
00:10:43,322 --> 00:10:46,842
Мне нужно только Меню, Главная, О, Контакты.

133
00:10:46,842 --> 00:10:53,532
Я включил Dishподробно, мы придем к этому в одном из последующих упражнений.

134
00:10:53,532 --> 00:10:57,949
Итак, теперь, когда мы включили все это, следующий шаг для

135
00:10:57,949 --> 00:11:02,289
меня, чтобы определить различные маршруты, которые доступны здесь.

136
00:11:02,289 --> 00:11:06,884
Я буду определять константу здесь

137
00:11:06,884 --> 00:11:12,247
именованные маршруты типа Маршруты.

138
00:11:12,247 --> 00:11:17,908
Итак, теперь вы понимаете, почему у меня есть важные маршруты от углового маршрутизатора.

139
00:11:17,908 --> 00:11:23,148
Таким образом, это позволит мне определить массив, указав

140
00:11:23,148 --> 00:11:28,651
различные маршруты, которые являются частью моего приложения.

141
00:11:28,651 --> 00:11:32,940
Здесь, позвольте мне указать все маршруты здесь.

142
00:11:32,940 --> 00:11:37,854
Теперь, когда вы указываете маршруты в приложении Angular

143
00:11:37,854 --> 00:11:42,776
, вы будете указывать путь.

144
00:11:42,776 --> 00:11:48,303
Который я начну с HomeComponent,

145
00:11:48,303 --> 00:11:53,139
, а затем, когда я перейду к домашнему пути,

146
00:11:53,139 --> 00:11:59,368
соответствующим компонентом является HomeComponent.

147
00:12:00,630 --> 00:12:05,940
Поэтому, когда мой URL-адрес включает в себя дом,

148
00:12:05,940 --> 00:12:08,930
, тогда я буду переходить к HomeComponent.

149
00:12:09,930 --> 00:12:14,905
В лекции ранее мы уже видели, как мы используем HTML

150
00:12:14,905 --> 00:12:21,513
pushState () для распознавания внутренней навигации

151
00:12:21,513 --> 00:12:27,010
, используя поддержку HTML для pushState ().

152
00:12:27,010 --> 00:12:33,481
Вот что я использую здесь, чтобы определить эти различные маршруты здесь.

153
00:12:33,481 --> 00:12:38,003
Поэтому, когда я говорю localhost:4200/home,

154
00:12:38,003 --> 00:12:43,387
, то это указывает на HomeComponent, здесь.

155
00:12:43,387 --> 00:12:48,850
Так что я буду ориентироваться на HomeComponent.

156
00:12:48,850 --> 00:12:55,909
Аналогичным образом, мы можем определить для других компонентов в нашем приложении.

157
00:12:55,909 --> 00:13:03,213
Следующий путь, который я собираюсь определить, - это MenuComponent.

158
00:13:03,213 --> 00:13:09,006
Для этого упражнения я просто собираюсь определить только эти два.

159
00:13:09,006 --> 00:13:14,119
Остальные будут заполнены как часть

160
00:13:14,119 --> 00:13:21,371
некоторых из последующих упражнений и заданий, которые следуют за ними.

161
00:13:21,371 --> 00:13:25,791
Итак, у нас есть два из них, Главная и Меню.

162
00:13:25,791 --> 00:13:29,400
Теперь я также должен указать маршрут по умолчанию здесь.

163
00:13:29,400 --> 00:13:35,379
Поэтому, когда пользователь переходит к localhost:4200,

164
00:13:35,379 --> 00:13:40,670
, вы попадете в местоположение по умолчанию.

165
00:13:40,670 --> 00:13:46,054
Поэтому в этом случае я просто перенаправлю пользователя на HomeComponent,

166
00:13:46,054 --> 00:13:50,828
который будет отображаться в приложении Angular.

167
00:13:50,828 --> 00:13:58,748
Поэтому, чтобы сделать это, я напечатаю свойство redirectTo.

168
00:13:58,748 --> 00:14:03,838
И затем определите, что будет /home.

169
00:14:03,838 --> 00:14:10,507
Это означает, что когда вы перемещаетесь без указания пути URL там,

170
00:14:10,507 --> 00:14:16,708
вы автоматически перейдете к HomeComponent,

171
00:14:16,708 --> 00:14:20,490
, и это должно соответствовать полному здесь.

172
00:14:20,490 --> 00:14:25,023
Так что эти три, я поставлю для маршрутов здесь, на данный момент.

173
00:14:25,023 --> 00:14:26,610
Остальные,

174
00:14:26,610 --> 00:14:31,580
, как я уже сказал, будут добавлены в рамках остальных упражнений.

175
00:14:31,580 --> 00:14:36,658
Теперь, очевидно, вы видите эти красные строчки

176
00:14:36,658 --> 00:14:40,889
, потому что они все в

177
00:14:40,889 --> 00:14:46,011
../Так что позвольте мне исправить их.

178
00:14:46,011 --> 00:14:50,232
Итак, теперь из файла routes.ts

179
00:14:50,232 --> 00:14:55,721
мы готовим эту константу Маршруты здесь и

180
00:14:55,721 --> 00:14:58,971
, затем делая ее доступной.

181
00:14:58,971 --> 00:15:04,111
Так что теперь, когда это готово для нас, мы вернемся к app-routing.module.

182
00:15:04,111 --> 00:15:09,282
И в app-routing.module

183
00:15:09,282 --> 00:15:15,141
я собираюсь импортировать константу маршрутов,

184
00:15:15,141 --> 00:15:17,908
Маршруты константу.

185
00:15:17,908 --> 00:15:24,542
Если вы хотите сказать, что как маршруты, маршруты константы, и используйте его здесь.

186
00:15:24,542 --> 00:15:26,516
Теперь, как мне использовать его здесь?

187
00:15:26,516 --> 00:15:31,451
Теперь RouterModule принимает в качестве

188
00:15:31,451 --> 00:15:36,029
параметр для forRoot,

189
00:15:38,737 --> 00:15:42,261
Параметр является конфигурацией маршрутов.

190
00:15:42,261 --> 00:15:50,154
Поэтому я собираюсь предоставить маршруты в качестве параметра для этого, RouterModule.

191
00:15:50,154 --> 00:15:56,520
Хорошо, так что это исправляет нашу конфигурацию маршрутизации для нашего приложения.

192
00:15:56,520 --> 00:16:01,480
Одно последнее изменение, которое нам нужно исправить, заключается в том, что из app-routing.module

193
00:16:01,480 --> 00:16:05,360
мы хотим иметь возможность экспортировать RouterModule в наш приложение-модуль так

194
00:16:05,360 --> 00:16:07,120
, что он также может использовать его.

195
00:16:07,120 --> 00:16:11,796
Так вот, где мы используем свойство экспорта

196
00:16:11,796 --> 00:16:16,346
в нашем декораторе NgModule.

197
00:16:16,346 --> 00:16:22,907
И сделать наш RouterModule доступным для AppModule.

198
00:16:22,907 --> 00:16:27,990
Так что давайте сохраним изменения и до сих пор.

199
00:16:27,990 --> 00:16:30,845
Теперь, когда вы направляетесь к одной из этих частей,

200
00:16:30,845 --> 00:16:36,040
независимо от того, что вы отображаете вид для конкретного компонента.

201
00:16:36,040 --> 00:16:40,260
У нас на данный момент ничего нет в нашем приложении.

202
00:16:40,260 --> 00:16:45,124
При просмотре файла AppComponent.html.

203
00:16:45,124 --> 00:16:49,961
Здесь по умолчанию у нас есть только заголовок приложения, меню приложения,

204
00:16:49,961 --> 00:16:52,107
и нижний колонтитул приложения здесь.

205
00:16:52,107 --> 00:16:54,780
Теперь, к счастью,

206
00:16:54,780 --> 00:17:00,127
Angular RouterModule предоставляет нам

207
00:17:00,127 --> 00:17:06,483
с директивой, называемой как маршрутизатор-розетка.

208
00:17:06,483 --> 00:17:11,635
Поэтому всякий раз, когда вы указываете эту директиву как,

209
00:17:14,802 --> 00:17:18,192
Тег в вашем файле шаблона.

210
00:17:18,192 --> 00:17:23,355
Тогда ваше угловое приложение будет автоматически использовать

211
00:17:23,355 --> 00:17:30,545
, что в качестве места, в котором должен быть вставлен соответствующий вид.

212
00:17:30,545 --> 00:17:36,725
Итак, указав маршрутизатор-розетку в файле шаблона моего AppComponent.

213
00:17:36,725 --> 00:17:44,537
Теперь я смогу отображать любую из этих данных в этом конкретном месте.

214
00:17:44,537 --> 00:17:48,747
Таким образом, мы внесли изменения в модуль маршрутизации приложения

215
00:17:48,747 --> 00:17:54,573
файл AppComponent.html, где мы добавили маршрутизатор-розетку.

216
00:17:54,573 --> 00:17:59,416
Мы определили маршруты в файле Routes.ts и

217
00:17:59,416 --> 00:18:06,074
, то у нас есть AppModule, где мы добавили в AppRoutingModule

218
00:18:06,074 --> 00:18:12,350
как один из импорта там, после импорта его здесь.

219
00:18:12,350 --> 00:18:15,110
Итак, после всех этих изменений, давайте пойдем и

220
00:18:15,110 --> 00:18:21,890
взглянем на то, что наши угловые приложения показывают в браузере.

221
00:18:21,890 --> 00:18:26,710
Перейдя в наш браузер, мы теперь видим, что в нашем браузере

222
00:18:26,710 --> 00:18:31,830
вещь по умолчанию, которая была показана здесь, это домашние работы.

223
00:18:31,830 --> 00:18:40,060
Из ваших знаний о том, как работает компонент, генерируемый угловым CLI.

224
00:18:40,060 --> 00:18:46,840
Вы уже признаете, что это должно быть в шаблоне для домашнего компонента.

225
00:18:46,840 --> 00:18:53,040
Также взгляните на URL в адресной части браузера.

226
00:18:53,040 --> 00:18:56,860
Вы видите, что он говорит локальный: 4200/дом.

227
00:18:56,860 --> 00:18:59,682
Если я просто напечатаю localhost:4200,

228
00:18:59,682 --> 00:19:04,996
это автоматически перенаправит себя на localhost:4200/home.

229
00:19:04,996 --> 00:19:12,923
Потому что мы настраиваем этот конкретный маршрут в нашей конфигурации маршрутов здесь.

230
00:19:12,923 --> 00:19:16,889
Теперь у нас нет способа перейти к оставшимся модулям, поэтому

231
00:19:16,889 --> 00:19:22,167
, как мы обеспечиваем связь, чтобы мы могли перейти к оставшемуся модулю.

232
00:19:22,167 --> 00:19:26,901
Таким образом, чтобы заполнить это, мы должны пойти и иметь возможность добавить дополнительную

233
00:19:26,901 --> 00:19:31,358
информацию в файлы шаблонов компонентов заголовка так

234
00:19:31,358 --> 00:19:36,640
, что он может перемещаться между этими различными компонентами.

235
00:19:36,640 --> 00:19:43,350
Возвращаясь к нашему редактору, позвольте мне открыть файл HeaderComponent.html.

236
00:19:43,350 --> 00:19:49,010
Внутри этого файла HeaderComponent мы видим, что у нас есть эти кнопки

237
00:19:49,010 --> 00:19:56,110
здесь, которые должны позволить нам перейти к тем конкретным компонентам там там.

238
00:19:56,110 --> 00:20:02,050
Итак, здесь мы берем помощь другой директивы атрибута, что

239
00:20:02,050 --> 00:20:08,370
модуль маршрутизации предоставляет нам называется routerLink.

240
00:20:08,370 --> 00:20:13,289
Таким образом, мы поставим

241
00:20:13,289 --> 00:20:17,984
routerLink как /home.

242
00:20:17,984 --> 00:20:22,968
Что означает, что для этой конкретной кнопки

243
00:20:22,968 --> 00:20:26,171
домашняя ссылка в нашей панели инструментов.

244
00:20:26,171 --> 00:20:30,334
Когда мы нажимаем на это, это должно автоматически направлять меня домой.

245
00:20:30,334 --> 00:20:36,640
Таким образом, мое угловое приложение знает, куда отправить меня в этот момент.

246
00:20:36,640 --> 00:20:40,090
Так что это для дома.

247
00:20:40,090 --> 00:20:44,420
Теперь также позвольте мне добавить один для меню здесь.

248
00:20:45,590 --> 00:20:48,550
Для меню, когда я нажимаю на ссылку меню там,

249
00:20:48,550 --> 00:20:54,020
, что должно привести меня к компоненту меню.

250
00:20:54,020 --> 00:21:01,140
Таким образом, директива атрибута routerLink позволяет мне указать, как вы видите

251
00:21:01,140 --> 00:21:08,010
здесь строку, в которой я могу указать путь, который должен быть добавлен в.

252
00:21:09,010 --> 00:21:14,900
Давайте также сохраним эти изменения, а теперь посмотрим на наше приложение.

253
00:21:14,900 --> 00:21:21,021
Перейдя к нашему приложению, теперь мы видим, что компонент Home отображается здесь.

254
00:21:21,021 --> 00:21:25,426
Когда мы нажимаем на компонент Menu, мы находимся в меню.

255
00:21:25,426 --> 00:21:30,570
Поэтому обратите внимание, как мое приложение автоматически переместилось на

256
00:21:30,570 --> 00:21:35,509
компонент меню, чтобы показать представление с меню здесь.

257
00:21:35,509 --> 00:21:39,590
А также взгляните на адресную строку,

258
00:21:39,590 --> 00:21:46,670
обратите внимание, как адресная строка теперь показывает локальный хост: 4200/меню.

259
00:21:46,670 --> 00:21:51,670
Опять же, мы можем перейти обратно к домашнему компоненту и к компоненту меню

260
00:21:51,670 --> 00:21:52,410
назад и вперед.

261
00:21:53,580 --> 00:21:59,230
Таким образом, это показывает, как, добавив эту маршрутизацию в наше приложение,

262
00:21:59,230 --> 00:22:04,940
мы можем перемещаться и показывать различные взгляды в нашем приложении.

263
00:22:04,940 --> 00:22:09,640
Теперь, о и контакт, мы собираемся сделать это в рамках

264
00:22:09,640 --> 00:22:14,090
другого упражнения и задания, которое следует позже.

265
00:22:15,150 --> 00:22:20,485
Это завершает это упражнение, где мы использовали модуль углового маршрутизатора и

266
00:22:20,485 --> 00:22:25,047
затем настроили наше угловое приложение для использования различных маршрутов

267
00:22:25,047 --> 00:22:27,212
, чтобы показать различные представления.

268
00:22:27,212 --> 00:22:29,240
Это хорошее время для

269
00:22:29,240 --> 00:22:35,117
, чтобы вы сделали фиксацию Git с сообщением Основы углового маршрутизатора.

270
00:22:35,117 --> 00:22:36,115
[МУЗЫКА]