1
00:00:03,650 --> 00:00:10,075
У нас только что было краткое введение к атрибутивным директивам в предыдущей лекции.

2
00:00:10,075 --> 00:00:16,440
Давайте теперь построим пользовательскую директиву атрибута для нашего углового приложения, а затем

3
00:00:16,440 --> 00:00:23,025
использовать ее в представлениях некоторых компонентов в нашем угловом приложении.

4
00:00:23,025 --> 00:00:26,340
По пути мы узнаем о том, как мы можем создавать пользовательские директивы

5
00:00:26,340 --> 00:00:30,795
и использовать их в нашем угловом приложении.

6
00:00:30,795 --> 00:00:36,275
Мы будем использовать Angular CLI для создания пользовательской директивы и затем

7
00:00:36,275 --> 00:00:39,830
обновить ее, чтобы выполнить вид

8
00:00:39,830 --> 00:00:45,245
функций, которые нам нужны в этой директиве атрибута.

9
00:00:45,245 --> 00:00:51,220
Под директивой сохранить в отдельной папке с именем Directives,

10
00:00:51,220 --> 00:00:52,700
в моей папке приложения.

11
00:00:52,700 --> 00:00:56,805
Итак, позвольте мне создать новую папку с именем Directives.

12
00:00:56,805 --> 00:01:02,820
Теперь я собираюсь создать свою пользовательскую директиву внутри этой папки Directives.

13
00:01:02,820 --> 00:01:07,170
Пользуется угловым CLI, чтобы создать нашу пользовательскую директиву.

14
00:01:07,170 --> 00:01:08,495
Итак, в подсказке тип

15
00:01:08,495 --> 00:01:20,400
ng генерировать или g детективами/выделить.

16
00:01:20,780 --> 00:01:26,110
Таким образом, эта конкретная директива будет называться директивой выделения.

17
00:01:26,110 --> 00:01:28,790
Таким образом, мы создадим

18
00:01:28,790 --> 00:01:34,460
новую директиву, называемую директивой выделения, а затем мы теперь пойдем

19
00:01:34,460 --> 00:01:38,600
и отредактируем, что выделите директивные файлы, которые

20
00:01:38,600 --> 00:01:43,175
были созданы для создания нашей пользовательской директивы.

21
00:01:43,175 --> 00:01:46,895
Что именно я пытаюсь достичь с помощью этой директивы?

22
00:01:46,895 --> 00:01:52,910
Позвольте мне отвезти вас в меню в нашем угловом приложении.

23
00:01:52,910 --> 00:01:54,355
В представлении меню

24
00:01:54,355 --> 00:01:58,420
, когда я хочу выбрать любой из этих пунктов в настоящее время,

25
00:01:58,420 --> 00:02:01,495
Я не знаю точно, где я нахожусь.

26
00:02:01,495 --> 00:02:08,520
Теперь вместо этого, когда моя мышь наводит на любой из этих элементов в моем списке сетки,

27
00:02:08,520 --> 00:02:13,340
я хочу иметь возможность выделить какой-то элемент, чтобы указать, что если я нажимаю,

28
00:02:13,340 --> 00:02:15,870
я собираюсь выбрать этот конкретный элемент.

29
00:02:15,870 --> 00:02:19,220
Итак, это то, что функциональность, которую я собираюсь разработать

30
00:02:19,220 --> 00:02:23,825
, используя мою директиву выделения, которую я только что создал.

31
00:02:23,825 --> 00:02:28,410
Для этого давайте откроем файл directive.ts выделения.

32
00:02:28,410 --> 00:02:33,935
Итак, вы видите, что у нас есть лесные леса без костей, доступные для директивы

33
00:02:33,935 --> 00:02:36,500
уже здесь, и вы увидите, что мы имеем

34
00:02:36,500 --> 00:02:39,845
уже импортировали директора из углового кода.

35
00:02:39,845 --> 00:02:45,230
Теперь к этому, я собираюсь добавить еще несколько импорта.

36
00:02:45,230 --> 00:02:52,055
Итак, мы импортируем ElementRef, а затем импортируем Renderer2 здесь.

37
00:02:52,055 --> 00:02:57,215
Теперь Renderer2 доступен только с Угловым четырьмя и выше.

38
00:02:57,215 --> 00:02:59,710
Более ранняя версия рендерера называлась

39
00:02:59,710 --> 00:03:04,290
renderush и теперь она была дублирована с Угловым четырем.

40
00:03:04,290 --> 00:03:06,920
Renderer2 теперь является новой реализацией рендерера

41
00:03:06,920 --> 00:03:11,030
с лучшей поддержкой некоторых других функций.

42
00:03:11,030 --> 00:03:18,045
Итак, я собираюсь применить Renderer2 для создания директивы выделения.

43
00:03:18,045 --> 00:03:20,005
Почему теперь мы используем этот рендерер?

44
00:03:20,005 --> 00:03:23,690
Теперь, когда вы создаете директивы в вашем угловом приложении,

45
00:03:23,690 --> 00:03:25,640
из самого углового приложения,

46
00:03:25,640 --> 00:03:30,750
хотя на данный момент наше угловое приложение отображается в основном в браузере,

47
00:03:30,750 --> 00:03:33,740
вы можете использовать тот же код строительных лесов для

48
00:03:33,740 --> 00:03:37,420
ваше угловое приложение для создания приложения для других целей.

49
00:03:37,420 --> 00:03:42,985
В родном курсе пропуска, который мы увидим позже в этой специализации,

50
00:03:42,985 --> 00:03:50,385
мы увидим еще одно использование этого кода для создания приложений с использованием NativeScript.

51
00:03:50,385 --> 00:03:54,470
Таким образом, в этом случае рендеринг будет выполняться по-другому,

52
00:03:54,470 --> 00:03:56,160
не в браузере.

53
00:03:56,160 --> 00:04:00,455
Таким образом, нам нужно использовать этот Renderer2,

54
00:04:00,455 --> 00:04:03,710
, который позволяет нам автоматически адаптироваться к

55
00:04:03,710 --> 00:04:08,120
соответствующей платформе, на которой делается рендеринг этого представления.

56
00:04:08,120 --> 00:04:13,320
Итак, вот почему я использую рендерер здесь.

57
00:04:13,660 --> 00:04:20,460
Кроме того, еще одна вещь, которую я хочу импортировать, - это HostListener.

58
00:04:20,460 --> 00:04:24,650
HostListener будет слушать движения мыши с экрана

59
00:04:24,650 --> 00:04:28,755
и соответствующим образом реагировать в этих обстоятельствах.

60
00:04:28,755 --> 00:04:34,099
Мы увидим использование этих, когда мы создадим директиву через несколько минут.

61
00:04:34,099 --> 00:04:37,010
Итак, теперь, когда мы импортировали то, что нам нужно,

62
00:04:37,010 --> 00:04:40,620
мы собираемся ввести несколько вещей в наш конструктор.

63
00:04:40,620 --> 00:04:47,180
Итак, мы сначала используем el,

64
00:04:47,180 --> 00:04:52,625
, который имеет тип ElementRef и

65
00:04:52,625 --> 00:04:59,569
также второй, который мы будем использовать, является рендерером,

66
00:04:59,569 --> 00:05:04,265
который имеет тип Renderer2.

67
00:05:04,265 --> 00:05:11,254
Теперь с этим, что мы собираемся сделать, это то, что мы будем использовать

68
00:05:11,254 --> 00:05:20,360
HostListener, а затем они будут указывать, что для HostListener,

69
00:05:20,360 --> 00:05:28,094
, когда происходит событие mouseenter,

70
00:05:28,094 --> 00:05:38,340
тогда мы будем называть метод onmouseenter

71
00:05:38,340 --> 00:05:41,400
и в методе onmouseenter, мы собираемся что-то сделать.

72
00:05:41,400 --> 00:05:43,790
Аналогичным образом, я создаю еще один

73
00:05:43,790 --> 00:05:55,005
под названием HostListener и mouseleave.

74
00:05:55,005 --> 00:05:58,310
Итак, когда мышь покидает определенный регион,

75
00:05:58,310 --> 00:06:02,790
то что вы собираетесь делать на mouseleave?

76
00:06:02,950 --> 00:06:06,470
Мы собираемся сделать другую операцию.

77
00:06:06,470 --> 00:06:11,660
Итак, что мы собираемся сделать, это когда мышь входит в определенный регион, в данном случае

78
00:06:11,660 --> 00:06:15,710
мы используем эту директиву атрибута для того, чтобы выделить

79
00:06:15,710 --> 00:06:22,130
конкретный элемент из моего списка сетки, на который навел курсор мыши.

80
00:06:22,130 --> 00:06:24,935
Итак, это цель для реализации этих

81
00:06:24,935 --> 00:06:28,050
и когда указатель мыши отходит от этого элемента,

82
00:06:28,050 --> 00:06:29,580
, который больше не будет выделяться.

83
00:06:29,580 --> 00:06:31,575
Итак, это цель этой директивы,

84
00:06:31,575 --> 00:06:33,850
директива выделения, которую я создаю здесь.

85
00:06:33,850 --> 00:06:40,715
Итак, когда мышь входит в определенную область.

86
00:06:40,715 --> 00:06:47,245
Итак, я собираюсь использовать рендерер, и рендерер предоставляет метод addClass.

87
00:06:47,245 --> 00:06:55,990
Таким образом, этот метод будет использоваться для добавления класса к элементу сетки в моем списке сетки.

88
00:06:55,990 --> 00:06:58,755
Итак, класс, который я собираюсь добавить,

89
00:06:58,755 --> 00:07:08,160
способ, как он настроен, скажет this.el.nativeElement и

90
00:07:08,160 --> 00:07:12,260
вторым параметром является

91
00:07:12,260 --> 00:07:17,240
имя класса, которое вы собираетесь применить, когда вы начинаете в эту область.

92
00:07:17,240 --> 00:07:21,965
Итак, мы применим этот класс подсветки к этому элементу, когда

93
00:07:21,965 --> 00:07:27,425
ваша мышь перемещается в область, где этот элемент отображается в представлении.

94
00:07:27,425 --> 00:07:34,765
Теперь то же самое. Я собираюсь сделать другой метод, когда мышь уходит,

95
00:07:34,765 --> 00:07:37,200
я удалю этот класс.

96
00:07:37,200 --> 00:07:41,275
Таким образом, метод removeClass также поддерживается Renderer2.

97
00:07:41,275 --> 00:07:42,530
Итак, в этом случае

98
00:07:42,530 --> 00:07:44,780
, когда мышь перемещается в этот регион,

99
00:07:44,780 --> 00:07:49,270
этот класс выделения будет добавлен к этому элементу сетки.

100
00:07:49,270 --> 00:07:52,250
Когда мышь покидает этот конкретный элемент сетки,

101
00:07:52,250 --> 00:07:54,890
класс выделения будет удален из элементов сетки.

102
00:07:54,890 --> 00:07:57,685
Итак, вот как с помощью этой директивы атрибута

103
00:07:57,685 --> 00:08:00,540
я добавляю и удаляю классы,

104
00:08:00,540 --> 00:08:06,840
CSS классы в мой элемент сетки на моей странице GridView.

105
00:08:06,840 --> 00:08:12,070
Теперь, следующим шагом, конечно, является создание этого класса, называемого классом выделения.

106
00:08:12,070 --> 00:08:16,535
Итак, чтобы сделать это, я перейду в файл styles.scss

107
00:08:16,535 --> 00:08:21,495
, где у нас есть глобальные стили, хранящиеся здесь.

108
00:08:21,495 --> 00:08:23,900
Итак, в файле styles.scss

109
00:08:23,900 --> 00:08:32,385
я добавлю в выделенный класс CSS.

110
00:08:32,385 --> 00:08:37,340
Выделяющий класс CSS, который я определяю как цвет фона.

111
00:08:37,340 --> 00:08:42,825
Я буду применять background-bale,

112
00:08:42,825 --> 00:08:46,810
, который я уже определил ранее, а затем,

113
00:08:46,810 --> 00:08:52,140
Я бы применил границу одного пикселя,

114
00:08:52,140 --> 00:08:55,780
сплошную границу цвета,

115
00:08:55,860 --> 00:09:04,595
первичный цвет-темный, который также я определил ранее

116
00:09:04,595 --> 00:09:13,335
как переменная CSS, и я также увеличим z-индекс до одного.

117
00:09:13,335 --> 00:09:18,750
Это означает, что этот пункт будет поднят над оставшимися в нем элементами.

118
00:09:18,750 --> 00:09:24,790
Я уверен, что из ваших знаний CSS вы понимаете, что делается.

119
00:09:24,790 --> 00:09:31,870
Кроме того, я собираюсь сделать немного преобразования на предмет там,

120
00:09:31,870 --> 00:09:36,495
Я просто собираюсь увеличить его на крошечную сумму,

121
00:09:36,495 --> 00:09:39,570
масштабировать его до 1,01.

122
00:09:39,570 --> 00:09:42,220
Итак, крошечный немного поднял, а затем появился,

123
00:09:42,220 --> 00:09:46,115
так что выделяет его на экране.

124
00:09:46,115 --> 00:09:50,370
Итак, это класс CSS, который

125
00:09:50,370 --> 00:09:54,535
я собираюсь применить, используя пользовательскую директиву, которую я создал там.

126
00:09:54,535 --> 00:09:57,530
Теперь, где я буду применять эту пользовательскую директиву?

127
00:09:57,530 --> 00:10:04,340
Мы будем использовать эту пользовательскую директиву в нашем файле шаблона компонентов меню.

128
00:10:04,340 --> 00:10:06,170
Теперь, прежде чем мы сделаем это,

129
00:10:06,170 --> 00:10:08,840
вернемся к директиве выделения и

130
00:10:08,840 --> 00:10:11,610
вы заметите, что в директиве выделения

131
00:10:11,610 --> 00:10:17,555
у вас есть этот декоратор директивы здесь, где у вас есть свойство selector,

132
00:10:17,555 --> 00:10:20,355
, который был установлен для подсветки приложения.

133
00:10:20,355 --> 00:10:23,360
Итак, везде, где вы хотите использовать эту директиву,

134
00:10:23,360 --> 00:10:25,430
вы будете использовать атрибут

135
00:10:25,430 --> 00:10:30,110
appHighlight в пределах этого конкретного элемента в вашем шаблоне.

136
00:10:30,110 --> 00:10:33,940
Итак, вот как создается эта директива.

137
00:10:33,940 --> 00:10:36,910
Итак, давайте применим это приложение выделить атрибут

138
00:10:36,910 --> 00:10:41,165
директиву в нашем файле шаблона компонентов меню.

139
00:10:41,165 --> 00:10:44,749
Итак, перейдя в файл шаблона компонентов меню,

140
00:10:44,749 --> 00:10:50,090
я собираюсь применить эту директиву выделения к этой mat-grid-плитке здесь.

141
00:10:50,090 --> 00:10:52,330
Итак, в этой плитке сетки

142
00:10:52,330 --> 00:11:01,950
я буду применять эту директиву атрибута appHighlight к этому конкретному элементу здесь.

143
00:11:01,950 --> 00:11:04,485
С этим мы завершили все обновления.

144
00:11:04,485 --> 00:11:11,005
Давайте сохраним изменения, а затем пойдем и посмотрим на наше приложение после этого изменения.

145
00:11:11,005 --> 00:11:13,680
Перейти в наше приложение в браузере.

146
00:11:13,680 --> 00:11:20,270
Теперь, с применением директивы appHighlight, которую мы только что создали,

147
00:11:20,270 --> 00:11:27,050
вы заметите, что именно происходит, когда мы просматриваем элемент в нашем представлении меню здесь.

148
00:11:27,050 --> 00:11:32,010
Итак, вы замечаете, что всякий раз, когда вы наведите курсор на элемент в представлении,

149
00:11:32,010 --> 00:11:36,770
класс выделения CSS применяется к каждому из них,

150
00:11:36,770 --> 00:11:41,150
, в котором какой конкретный пункт выделяется в меню,

151
00:11:41,150 --> 00:11:46,270
, чтобы это дало лучший пользовательский опыт для пользователя.

152
00:11:46,270 --> 00:11:50,719
Вы можете видеть, что размер этого элемента когда-либо так немного

153
00:11:50,719 --> 00:11:55,840
увеличился и выдвинут вперед в представлении здесь.

154
00:11:55,840 --> 00:11:58,910
Это завершает реализацию

155
00:11:58,910 --> 00:12:03,470
пользовательской директивы атрибутов, которую мы сделали в этом упражнении.

156
00:12:03,470 --> 00:12:09,810
Это хорошее время для вас, чтобы сделать git commit с директивой сообщения.