1
00:00:04,010 --> 00:00:09,440
Прежде чем приступить к работе с угловым шаблоном форм,

2
00:00:09,440 --> 00:00:15,165
нам нужно найти способ наложения контента поверх текущего веб-представления.

3
00:00:15,165 --> 00:00:21,935
Bootstrap, у нас есть модели, которые позволяют нам накладывать контент на верхней части веб-страницы.

4
00:00:21,935 --> 00:00:26,700
С использованием углового материала в нашем угловом приложении

5
00:00:26,700 --> 00:00:29,970
Угловой материал предоставляет компонент под названием

6
00:00:29,970 --> 00:00:32,820
компонент углового диалога, который позволяет

7
00:00:32,820 --> 00:00:35,865
накладывать содержимое поверх текущего представления.

8
00:00:35,865 --> 00:00:42,010
Давайте рассмотрим, как мы используем компонент диалога в этом упражнении.

9
00:00:42,080 --> 00:00:45,470
Чтобы начать это упражнение,

10
00:00:45,470 --> 00:00:49,580
давайте перейдем к нашему коду, и нам нужно найти

11
00:00:49,580 --> 00:00:54,230
способ запуска приложения, чтобы показать диалог.

12
00:00:54,230 --> 00:00:58,620
Итак, чтобы сделать это, давайте добавим кнопку в нашу панель инструментов здесь.

13
00:00:58,620 --> 00:01:01,475
Итак, перейдя на панель инструментов прямо в верхней части здесь,

14
00:01:01,475 --> 00:01:10,790
позвольте мне добавить пролет с классом flex spacer, который мы

15
00:01:10,790 --> 00:01:18,340
ввели в наш SCSS

16
00:01:18,340 --> 00:01:21,650
файл для нашего приложения.

17
00:01:21,650 --> 00:01:29,170
Итак, мы ввели flexor spacer в файле styles.scss здесь,

18
00:01:29,170 --> 00:01:30,840
прямо ниже.

19
00:01:30,840 --> 00:01:34,240
Итак, это класс, который мы будем использовать с промежутком здесь.

20
00:01:34,240 --> 00:01:37,035
Итак, когда вы применяете flexor span к пролету,

21
00:01:37,035 --> 00:01:40,670
то, что он делает, это обеспечивает достаточное пространство между

22
00:01:40,670 --> 00:01:45,670
предыдущим элементом и элементом, который следует здесь.

23
00:01:45,670 --> 00:01:49,280
Таким образом, он будет нажимать любой элемент, который следует за span, до

24
00:01:49,280 --> 00:01:53,030
крайнего правого края экрана, насколько это возможно.

25
00:01:53,030 --> 00:01:54,985
Итак, вот, после этого,

26
00:01:54,985 --> 00:01:57,500
позвольте мне добавить кнопку здесь.

27
00:01:57,500 --> 00:02:02,755
Итак, эта кнопка, которая при нажатии будет

28
00:02:02,755 --> 00:02:09,635
вызывать функцию openLoginForms.

29
00:02:09,635 --> 00:02:11,660
Итак, как вы понимаете,

30
00:02:11,660 --> 00:02:17,865
вот где мы будем поддерживать форму для нашего заявления.

31
00:02:17,865 --> 00:02:22,475
Рассмотрим, как будет разработана форма в следующем упражнении.

32
00:02:22,475 --> 00:02:25,330
Теперь, для этого, позвольте мне добавить в

33
00:02:25,330 --> 00:02:33,120
соответствующий шрифт удивительные иконки.

34
00:02:33,120 --> 00:02:38,950
Итак, я скажу fa fa-signin,

35
00:02:42,290 --> 00:02:50,010
, а также добавить в fa-lg к этому.

36
00:02:50,010 --> 00:02:52,875
Итак, что добавит в иконку,

37
00:02:52,875 --> 00:02:54,645
знак в иконке здесь,

38
00:02:54,645 --> 00:02:55,880
, а затем после этого,

39
00:02:55,880 --> 00:02:58,690
мы поместим слово логин там.

40
00:02:58,690 --> 00:03:05,980
Таким образом, это создаст кнопку под названием login в панели инструментов

41
00:03:05,980 --> 00:03:14,070
к правому краю экрана вместе со значком входа там,

42
00:03:14,070 --> 00:03:16,960
, который при нажатии откроет форму входа.

43
00:03:16,960 --> 00:03:22,670
Сама эта форма входа будет размещена внутри компонента диалога материалов.

44
00:03:22,670 --> 00:03:26,204
Теперь, чтобы создать компонент диалога, очевидно,

45
00:03:26,204 --> 00:03:29,330
мы понимаем, что это будет компонент, который

46
00:03:29,330 --> 00:03:32,270
нужно наложить поверх текущего взгляда там.

47
00:03:32,270 --> 00:03:36,770
Таким образом, нам нужен еще один компонент, который будет добавлен в наше приложение.

48
00:03:36,770 --> 00:03:44,095
Итак, давайте перейдем к терминалу, а затем добавим еще один компонент в наше приложение.

49
00:03:44,095 --> 00:03:50,735
Перейдя в терминал, позвольте мне ввести логин компонента ng.

50
00:03:50,735 --> 00:03:55,725
Итак, мы добавили новый компонент, называемый как компонент входа в наше приложение.

51
00:03:55,725 --> 00:03:57,725
После того, как компонент входа будет добавлен,

52
00:03:57,725 --> 00:04:04,490
пойдем и сконфигурируем компонент входа в качестве компонента диалога в нашем приложении.

53
00:04:04,490 --> 00:04:08,305
Итак, чтобы сделать это, давайте вернемся к нашему кодексу.

54
00:04:08,305 --> 00:04:10,215
Возвращаясь к нашему коду,

55
00:04:10,215 --> 00:04:13,715
мы видим, что компонент входа теперь открыт.

56
00:04:13,715 --> 00:04:16,445
Позвольте мне открыть файл component.ts для входа.

57
00:04:16,445 --> 00:04:18,935
Итак, настройте это как

58
00:04:18,935 --> 00:04:24,485
компонент диалога в угловом приложении, используя компонент диалога материала.

59
00:04:24,485 --> 00:04:30,385
Позвольте мне импортировать MatDialog.

60
00:04:30,385 --> 00:04:32,540
Итак, это компонент, который поддерживает

61
00:04:32,540 --> 00:04:39,480
компонент диалога в угловом материале, а затем

62
00:04:39,600 --> 00:04:45,545
позвольте мне импортировать MatDialogRef и они импортируются

63
00:04:45,545 --> 00:04:52,420
из углового материала здесь.

64
00:04:53,140 --> 00:05:03,750
Это позволит нам создать наш компонент и превратить его в компонент диалога.

65
00:05:03,750 --> 00:05:10,030
Теперь, после этого, давайте продолжим, а затем настроим наш файл шаблона здесь.

66
00:05:10,030 --> 00:05:11,940
Итак, перейдя к файлу шаблона здесь,

67
00:05:11,940 --> 00:05:16,300
Я собираюсь создать это как сказать mat-toolbar.

68
00:05:16,300 --> 00:05:22,330
Итак, в рамках этого диалога также будет отображаться панель инструментов.

69
00:05:25,350 --> 00:05:34,065
Для этой панели инструментов, я скажу логин прямо вверху, после чего,

70
00:05:34,065 --> 00:05:43,920
мы представим класс flex spacer

71
00:05:43,920 --> 00:05:49,350
здесь, а затем после класса flex spacer,

72
00:05:49,350 --> 00:05:53,169
мы добавим в кнопку

73
00:05:54,590 --> 00:06:04,385
с атрибутами mat-button mat-dialog-close.

74
00:06:04,385 --> 00:06:09,850
Итак, этот mat-dialog-close является то, что диалоговые компоненты поддерживают для нас,

75
00:06:09,850 --> 00:06:13,490
этот атрибут, который превращает эту кнопку в

76
00:06:13,490 --> 00:06:18,255
кнопку, которая при нажатии будет закрывать этот диалог там.

77
00:06:18,255 --> 00:06:26,740
Внутри этой кнопки я собираюсь использовать время там.

78
00:06:26,740 --> 00:06:30,600
Итак, это отобразит его в виде креста на экране.

79
00:06:30,600 --> 00:06:33,110
Итак, вот кнопка, которую мы добавим в диалог.

80
00:06:33,110 --> 00:06:38,855
Сейчас наш диалог содержит только это, по его мнению.

81
00:06:38,855 --> 00:06:44,870
Теперь, чтобы включить компонент диалога и использовать его,

82
00:06:44,870 --> 00:06:47,350
конечно, нам нужно перейти к модулю приложения.

83
00:06:47,350 --> 00:06:49,030
В модуле приложения

84
00:06:49,030 --> 00:06:59,190
нам нужно импортировать соответствующий модуль, который поддерживает компонент диалога.

85
00:06:59,190 --> 00:07:02,765
Итак, мы импортируем MatDialogueModule

86
00:07:02,765 --> 00:07:10,200
из диалогового окна «Угловой материал».

87
00:07:10,200 --> 00:07:20,300
Таким образом, это добавит в модуль диалога в наше приложение, а затем, как вы ожидаете,

88
00:07:20,300 --> 00:07:25,070
им придется спуститься сюда в импорт, а затем импортировать

89
00:07:25,070 --> 00:07:30,515
, что модуль диалога в наше приложение.

90
00:07:30,515 --> 00:07:32,735
Не только это, теперь

91
00:07:32,735 --> 00:07:38,575
для того, чтобы превратить угловой компонент в компонент диалога,

92
00:07:38,575 --> 00:07:44,330
мы также должны объявить этот компонент как компонент входа.

93
00:07:44,330 --> 00:07:49,310
Теперь напомним, что мы добавили в компонент входа в наше приложение и поэтому

94
00:07:49,310 --> 00:07:51,920
этот логин компонент уже добавлен там и

95
00:07:51,920 --> 00:07:54,845
затем также включен в декларации.

96
00:07:54,845 --> 00:08:02,255
Теперь, если вы хотите использовать это как наложение с компонентом диалога материала,

97
00:08:02,255 --> 00:08:08,285
нам также нужно включить это в другое свойство, называемое как компоненты ввода

98
00:08:08,285 --> 00:08:17,460
в нашем декораторе модуля ng здесь.

99
00:08:17,460 --> 00:08:19,715
Итак, внутри этих компонентов записи

100
00:08:19,715 --> 00:08:23,810
мне также нужно включить компонент входа здесь.

101
00:08:23,810 --> 00:08:26,000
Теперь это позволит нам использовать

102
00:08:26,000 --> 00:08:30,235
компонент входа в качестве наложения поверх текущего экрана.

103
00:08:30,235 --> 00:08:35,330
Итак, как только мы обновили компонент Angular материала,

104
00:08:35,330 --> 00:08:39,370
сейчас, мы должны иметь возможность активировать этот компонент входа.

105
00:08:39,370 --> 00:08:42,530
Теперь мы добавили в кнопку в

106
00:08:42,530 --> 00:08:47,240
компонент заголовка, а затем здесь мы имеем эту функцию под названием open login form.

107
00:08:47,240 --> 00:08:51,770
Таким образом, это должно вызвать показ диалога.

108
00:08:51,770 --> 00:08:56,350
Итак, входя в файл заголовка component.ts,

109
00:08:57,410 --> 00:09:04,350
, чтобы использовать компонент диалога мат в компоненте заголовка,

110
00:09:04,350 --> 00:09:12,420
позвольте мне импортировать MatDialog, а затем

111
00:09:12,420 --> 00:09:22,605
MatDialogRef из углового материала.

112
00:09:22,605 --> 00:09:26,745
Внутри этой функции, в конструкторе,

113
00:09:26,745 --> 00:09:28,575
позвольте мне ввести

114
00:09:28,575 --> 00:09:37,365
диалог как MatDialog.

115
00:09:37,365 --> 00:09:43,680
Таким образом, это сервис, который позволяет нам открыть компонент как компонент диалога.

116
00:09:43,680 --> 00:09:45,615
Теперь, как это работает?

117
00:09:45,615 --> 00:09:50,039
Итак, здесь нам нужно добавить в эту функцию openLoginForm,

118
00:09:52,090 --> 00:09:57,610
которая при вызове должна вызывать отображение компонента диалога.

119
00:09:57,610 --> 00:10:00,894
Итак, для этого, мы скажем, этот диалог,

120
00:10:00,894 --> 00:10:03,860
и этот диалог поддерживает функцию под названием

121
00:10:03,860 --> 00:10:09,395
открыт, к которой мы поставляем компонент, который собирается

122
00:10:09,395 --> 00:10:18,170
действовать в качестве представления для диалога, который накладывается поверх текущего веб-представления.

123
00:10:18,170 --> 00:10:22,415
Итак, здесь, как мы понимаем,

124
00:10:22,415 --> 00:10:28,475
мы объявили компонент входа в качестве компонента диалога.

125
00:10:28,475 --> 00:10:33,740
Итак, мы вызовем компонент входа

126
00:10:33,740 --> 00:10:39,670
, а затем также будем указывать размер для диалога.

127
00:10:39,670 --> 00:10:40,910
Если вы хотите,

128
00:10:40,910 --> 00:10:44,089
вы можете разрешить отображение размера по умолчанию,

129
00:10:44,089 --> 00:10:47,610
, но вы также можете настроить размер явно, если хотите.

130
00:10:47,610 --> 00:10:48,620
Итак, в этом случае

131
00:10:48,620 --> 00:10:57,960
позвольте мне настроить ширину и высоту этого диалога.

132
00:11:02,370 --> 00:11:05,960
Вам не обязательно это делать, если вы этого не сделаете,

133
00:11:05,960 --> 00:11:11,990
тогда диалог будет показан в стандартном размере по умолчанию здесь.

134
00:11:11,990 --> 00:11:16,550
Итак, с этим, мой компонент заголовка

135
00:11:16,550 --> 00:11:20,490
теперь настроен таким образом, что при вызове открытой формы входа в систему

136
00:11:20,490 --> 00:11:23,765
это позволит нам открыть

137
00:11:23,765 --> 00:11:28,835
компонент входа в качестве диалога, а затем показать его поверх текущей строки.

138
00:11:28,835 --> 00:11:32,090
Итак, давайте сохраним все изменения, а затем пойдем и посмотрим

139
00:11:32,090 --> 00:11:35,605
на наше приложение в браузере.

140
00:11:35,605 --> 00:11:40,310
Перейдя в браузер, вы увидите, что в правом краю экрана

141
00:11:40,310 --> 00:11:43,010
у нас есть еще одна новая кнопка здесь называется кнопка входа,

142
00:11:43,010 --> 00:11:47,085
и увидеть, что знак в шрифте удивительный значок, добавленный к этому.

143
00:11:47,085 --> 00:11:49,560
Теперь, когда вы нажмете на кнопку входа,

144
00:11:49,560 --> 00:11:53,995
вы сразу увидите диалоговое окно на экране.

145
00:11:53,995 --> 00:11:58,610
Опять же, вы можете отклонить это, щелкнув в любом месте экрана за пределами

146
00:11:58,610 --> 00:12:03,225
диалога или вы нажимаете на это, а затем диалог всплывает на экране.

147
00:12:03,225 --> 00:12:06,840
Итак, из Bootstrap, вы видели модальный в Bootstrap.

148
00:12:06,840 --> 00:12:10,485
Итак, это точно так же, как модальный из Bootstrap.

149
00:12:10,485 --> 00:12:13,645
Итак, здесь у нас есть диалог, который появляется на экране.

150
00:12:13,645 --> 00:12:17,720
Теперь у нас есть место в диалоге, где мы можем теперь поместить

151
00:12:17,720 --> 00:12:22,790
в содержание, которое нам нужно отобразить при вызове этого диалога.

152
00:12:22,790 --> 00:12:26,120
Также обратите внимание на эту кнопку увольнение здесь.

153
00:12:26,120 --> 00:12:27,260
Итак, когда вы нажимаете на это,

154
00:12:27,260 --> 00:12:29,030
диалог также отклоняется.

155
00:12:29,030 --> 00:12:31,535
Теперь, когда вы нажимаете в любом месте диалога,

156
00:12:31,535 --> 00:12:36,320
ничего не происходит, но при нажатии на эту кнопку диалог отклоняется.

157
00:12:36,320 --> 00:12:43,340
Итак, так работает компонент диалога из углового материала в нашем приложении.

158
00:12:43,340 --> 00:12:50,005
Следующим шагом является добавление в форму входа в это диалоговое окно.

159
00:12:50,005 --> 00:12:53,365
С этим мы завершаем это упражнение.

160
00:12:53,365 --> 00:12:58,250
В этом упражнении вы видели, как мы можем использовать диалоговое окно Угловой материал, чтобы

161
00:12:58,250 --> 00:13:04,575
добавить наложение в наше приложение, а затем показать его поверх текущего представления.

162
00:13:04,575 --> 00:13:07,610
Добавим в форме к этому.

163
00:13:07,610 --> 00:13:13,770
Это хорошее время для вас, чтобы сделать фиксацию Git с диалогами сообщений.