1
00:00:03,650 --> 00:00:10,075
Acabamos de ter uma breve introdução às diretivas de atribuição na palestra anterior.

2
00:00:10,075 --> 00:00:16,440
Vamos agora construir uma diretiva de atributo personalizado para nossa aplicação angular e, em seguida,

3
00:00:16,440 --> 00:00:23,025
fazer uso dela dentro das visualizações de alguns dos componentes dentro de nossa aplicação angular.

4
00:00:23,025 --> 00:00:26,340
Ao longo do caminho, vamos aprender sobre como podemos criar

5
00:00:26,340 --> 00:00:30,795
diretivas personalizadas e usá-las em nosso aplicativo Angular.

6
00:00:30,795 --> 00:00:36,275
Vamos fazer uso de Angular CLI para criar a diretiva personalizada e, em seguida,

7
00:00:36,275 --> 00:00:39,830
atualizá-lo para executar o tipo de recursos

8
00:00:39,830 --> 00:00:45,245
que precisamos fornecidos por esta diretiva de atributo.

9
00:00:45,245 --> 00:00:51,220
Sob a manter a diretiva em uma pasta separada chamada Diretivas,

10
00:00:51,220 --> 00:00:52,700
dentro da pasta do meu aplicativo.

11
00:00:52,700 --> 00:00:56,805
Então, deixe-me criar uma nova pasta chamada Diretivas.

12
00:00:56,805 --> 00:01:02,820
Agora, vou criar minha diretiva personalizada dentro desta pasta Diretivas.

13
00:01:02,820 --> 00:01:07,170
Terá a ajuda da CLI angular para criar nossa diretiva personalizada.

14
00:01:07,170 --> 00:01:08,495
Então, no prompt,

15
00:01:08,495 --> 00:01:20,400
digite ng generate ou g detectives/highlight.

16
00:01:20,780 --> 00:01:26,110
Então, esta directiva em particular vai ser chamada de directiva destaque.

17
00:01:26,110 --> 00:01:28,790
Então, com isso, vamos criar

18
00:01:28,790 --> 00:01:34,460
uma nova diretiva chamada diretiva de destaque e então vamos agora ir

19
00:01:34,460 --> 00:01:38,600
e editar que destacar arquivos de diretiva que

20
00:01:38,600 --> 00:01:43,175
foram criados para criar nossa diretiva personalizada.

21
00:01:43,175 --> 00:01:46,895
O que exatamente estou tentando alcançar com esta diretiva?

22
00:01:46,895 --> 00:01:52,910
Deixe-me levá-lo para a visualização do menu dentro da nossa aplicação Angular.

23
00:01:52,910 --> 00:01:54,355
Na exibição de menu,

24
00:01:54,355 --> 00:01:58,420
quando eu quiser selecionar qualquer um desses itens atualmente,

25
00:01:58,420 --> 00:02:01,495
Eu não tenho idéia exatamente onde estou.

26
00:02:01,495 --> 00:02:08,520
Agora, em vez disso, quando meu mouse passar sobre qualquer um desses itens na minha lista de grade,

27
00:02:08,520 --> 00:02:13,340
Eu quero ser capaz de destacar algum item para indicar que, se eu clicar,

28
00:02:13,340 --> 00:02:15,870
eu vou estar selecionando esse item específico.

29
00:02:15,870 --> 00:02:19,220
Então, isso é o que a funcionalidade que eu estou indo para

30
00:02:19,220 --> 00:02:23,825
design usando minha diretiva de destaque que eu acabei de criar.

31
00:02:23,825 --> 00:02:28,410
Para fazer isso, vamos abrir o arquivo diretive.ts de destaque.

32
00:02:28,410 --> 00:02:33,935
Então, você vê que temos o andaime bare-bones disponível para a diretiva

33
00:02:33,935 --> 00:02:36,500
já aqui e você verá que temos

34
00:02:36,500 --> 00:02:39,845
já importou o diretor do código Angular.

35
00:02:39,845 --> 00:02:45,230
Agora a isso, vou adicionar mais algumas importações.

36
00:02:45,230 --> 00:02:52,055
Então, vamos importar ElementRef e, em seguida, vamos importar Renderer2 aqui.

37
00:02:52,055 --> 00:02:57,215
Now Renderer2 está disponível somente com Angular four e superior.

38
00:02:57,215 --> 00:02:59,710
A versão anterior do renderizador foi chamada

39
00:02:59,710 --> 00:03:04,290
renderush e foi duplicada agora com Angular quatro.

40
00:03:04,290 --> 00:03:06,920
Renderer2 agora é uma nova implementação do renderizador

41
00:03:06,920 --> 00:03:11,030
com melhor suporte para alguns outros recursos.

42
00:03:11,030 --> 00:03:18,045
Então, eu vou aplicar o Renderer2 para criar a diretiva de destaque.

43
00:03:18,045 --> 00:03:20,005
Agora, por que usamos este renderizador?

44
00:03:20,005 --> 00:03:23,690
Agora, quando você cria diretivas dentro do seu aplicativo Angular,

45
00:03:23,690 --> 00:03:25,640
do seu próprio aplicativo Angular,

46
00:03:25,640 --> 00:03:30,750
embora no momento nosso aplicativo Angular esteja sendo renderizado principalmente no navegador,

47
00:03:30,750 --> 00:03:33,740
você pode usar o mesmo código de andaimes para

48
00:03:33,740 --> 00:03:37,420
seu aplicativo Angular para criar um aplicativo para outros fins.

49
00:03:37,420 --> 00:03:42,985
No curso de salto nativo que veremos mais tarde nesta especialização,

50
00:03:42,985 --> 00:03:50,385
veremos outro uso deste código para criar aplicativos usando NativeScript.

51
00:03:50,385 --> 00:03:54,470
Então, nesse caso, a renderização seria feita de uma maneira diferente,

52
00:03:54,470 --> 00:03:56,160
não em um navegador.

53
00:03:56,160 --> 00:04:00,455
Então, precisamos usar este Renderer2,

54
00:04:00,455 --> 00:04:03,710
que nos permite adaptar automaticamente a

55
00:04:03,710 --> 00:04:08,120
a plataforma apropriada na qual a renderização desta visão está sendo feita.

56
00:04:08,120 --> 00:04:13,320
Então, essa é a razão pela qual eu estou fazendo uso do renderizador aqui.

57
00:04:13,660 --> 00:04:20,460
Além disso, mais uma coisa que quero importar é o HostListener.

58
00:04:20,460 --> 00:04:24,650
O HostListener ouvirá os movimentos do mouse da tela

59
00:04:24,650 --> 00:04:28,755
e responderá adequadamente nessas circunstâncias.

60
00:04:28,755 --> 00:04:34,099
Veremos o uso destes quando criarmos a diretiva em alguns momentos.

61
00:04:34,099 --> 00:04:37,010
Então agora, que importamos as coisas que precisamos,

62
00:04:37,010 --> 00:04:40,620
vamos injetar algumas coisas em nosso construtor.

63
00:04:40,620 --> 00:04:47,180
Então, vamos primeiro usar um el,

64
00:04:47,180 --> 00:04:52,625
que é do tipo ElementRef e

65
00:04:52,625 --> 00:04:59,569
também o segundo que usaremos é o renderizador,

66
00:04:59,569 --> 00:05:04,265
que é do tipo Renderer2.

67
00:05:04,265 --> 00:05:11,254
Agora com isso, o que vamos fazer é que vamos usar

68
00:05:11,254 --> 00:05:20,360
o HostListener e então eles indicariam que para o HostListener,

69
00:05:20,360 --> 00:05:28,094
quando o evento mouseenter ocorrer,

70
00:05:28,094 --> 00:05:38,340
então vamos chamar o método onmouseenter

71
00:05:38,340 --> 00:05:41,400
e no método onmouseenter, vamos fazer alguma coisa.

72
00:05:41,400 --> 00:05:43,790
Da mesma forma, vou criar outro

73
00:05:43,790 --> 00:05:55,005
chamado HostListener e mouseleave.

74
00:05:55,005 --> 00:05:58,310
Então, quando o mouse deixa uma determinada região,

75
00:05:58,310 --> 00:06:02,790
então o que você vai fazer no mouseleave?

76
00:06:02,950 --> 00:06:06,470
Vamos fazer uma operação diferente.

77
00:06:06,470 --> 00:06:11,660
Então, o que vamos fazer é quando o mouse entra em uma determinada região, neste caso,

78
00:06:11,660 --> 00:06:15,710
estamos usando esta diretiva de atributo para destacar

79
00:06:15,710 --> 00:06:22,130
o item específico da minha lista de grade para o qual o mouse passou o mouse.

80
00:06:22,130 --> 00:06:24,935
Então, esse é o propósito para implementar esses

81
00:06:24,935 --> 00:06:28,050
e quando o ponteiro do mouse passar para longe desse item,

82
00:06:28,050 --> 00:06:29,580
que não será mais destacado.

83
00:06:29,580 --> 00:06:31,575
Então, esse é o propósito desta diretiva,

84
00:06:31,575 --> 00:06:33,850
a diretiva de destaque que estou criando aqui.

85
00:06:33,850 --> 00:06:40,715
Então, quando o mouse entra em uma área específica.

86
00:06:40,715 --> 00:06:47,245
Então, eu vou usar o renderizador e o renderizador fornece um método chamado addClass.

87
00:06:47,245 --> 00:06:55,990
Então, este método será usado para adicionar uma classe ao item de grade na minha lista de grade.

88
00:06:55,990 --> 00:06:58,755
Então, a classe que eu vou adicionar,

89
00:06:58,755 --> 00:07:08,160
da maneira que ela está configurada é dirá this.el.nativeElement e

90
00:07:08,160 --> 00:07:12,260
o segundo parâmetro é

91
00:07:12,260 --> 00:07:17,240
o nome da classe que você vai aplicar quando você se aventurar nessa área.

92
00:07:17,240 --> 00:07:21,965
Então, vamos aplicar essa classe de destaque a esse elemento quando

93
00:07:21,965 --> 00:07:27,425
seu mouse se move para a região onde esse elemento é renderizado na exibição.

94
00:07:27,425 --> 00:07:34,765
Agora, a mesma coisa. Eu vou fazer outro método quando o mouse sair,

95
00:07:34,765 --> 00:07:37,200
Eu vou remover essa classe.

96
00:07:37,200 --> 00:07:41,275
Então, o método RemoveClass também é suportado pelo Renderer2.

97
00:07:41,275 --> 00:07:42,530
Então, neste caso,

98
00:07:42,530 --> 00:07:44,780
quando o mouse se move para essa região,

99
00:07:44,780 --> 00:07:49,270
esta classe de destaque será adicionada a esse item de grade.

100
00:07:49,270 --> 00:07:52,250
Quando o mouse sair desse item específico da grade,

101
00:07:52,250 --> 00:07:54,890
a classe de destaque será removida dos itens da grade.

102
00:07:54,890 --> 00:07:57,685
Então, é assim que usar esta diretiva de atributo,

103
00:07:57,685 --> 00:08:00,540
Estou adicionando e removendo classes,

104
00:08:00,540 --> 00:08:06,840
classes CSS ao meu item de grade na minha página GridView.

105
00:08:06,840 --> 00:08:12,070
Agora, o próximo passo é, naturalmente, criar esta classe chamada como a classe de destaque.

106
00:08:12,070 --> 00:08:16,535
Então, para fazer isso, vou para o arquivo styles.scss

107
00:08:16,535 --> 00:08:21,495
onde temos os estilos globais armazenados aqui.

108
00:08:21,495 --> 00:08:23,900
Então, dentro do arquivo styles.scss,

109
00:08:23,900 --> 00:08:32,385
vou adicionar na classe CSS destaque lá.

110
00:08:32,385 --> 00:08:37,340
A classe CSS destaque que vou definir como cor de fundo.

111
00:08:37,340 --> 00:08:42,825
Vou aplicar background-pale,

112
00:08:42,825 --> 00:08:46,810
que eu já defini anteriormente e, em seguida,

113
00:08:46,810 --> 00:08:52,140
Eu aplicaria uma borda de um pixel,

114
00:08:52,140 --> 00:08:55,780
borda sólida da cor,

115
00:08:55,860 --> 00:09:04,595
primário-cor-escuro, que também eu defini anteriormente

116
00:09:04,595 --> 00:09:13,335
como uma variável CSS e eu também aumentarei o z-index para um.

117
00:09:13,335 --> 00:09:18,750
O que significa que esse item será levantado sobre os itens restantes lá.

118
00:09:18,750 --> 00:09:24,790
Tenho certeza que pelo seu conhecimento de CSS você entende o que está sendo feito.

119
00:09:24,790 --> 00:09:31,870
Além disso, eu vou fazer um pouco de uma transformação no item lá,

120
00:09:31,870 --> 00:09:36,495
Eu só vou escalá-lo por uma pequena quantidade,

121
00:09:36,495 --> 00:09:39,570
por escala até 1,01.

122
00:09:39,570 --> 00:09:42,220
Então, um pouquinho levantado e, em seguida, apareceu,

123
00:09:42,220 --> 00:09:46,115
para que destaca na tela.

124
00:09:46,115 --> 00:09:50,370
Então, esta é a classe CSS que

125
00:09:50,370 --> 00:09:54,535
eu vou aplicar usando a diretiva personalizada que eu criei lá.

126
00:09:54,535 --> 00:09:57,530
Agora, onde vou aplicar esta diretiva personalizada?

127
00:09:57,530 --> 00:10:04,340
Vamos usar esta diretiva personalizada em nosso arquivo de modelo de componentes de menu.

128
00:10:04,340 --> 00:10:06,170
Agora, antes de fazermos isso,

129
00:10:06,170 --> 00:10:08,840
vamos voltar para destacar diretiva e

130
00:10:08,840 --> 00:10:11,610
você notaria que na diretiva de destaque,

131
00:10:11,610 --> 00:10:17,555
você tem esse decorador de diretiva aqui onde você tem uma propriedade chamada seletor,

132
00:10:17,555 --> 00:10:20,355
que foi definida para destaque do aplicativo.

133
00:10:20,355 --> 00:10:23,360
Então, onde quer que você queira usar esta diretiva,

134
00:10:23,360 --> 00:10:25,430
você usará um atributo chamado

135
00:10:25,430 --> 00:10:30,110
AppHighLight dentro desse elemento específico em seu modelo.

136
00:10:30,110 --> 00:10:33,940
Então, é assim que esta diretiva é criada.

137
00:10:33,940 --> 00:10:36,910
Então, vamos aplicar este aplicativo destaque atributo

138
00:10:36,910 --> 00:10:41,165
diretiva dentro do nosso arquivo de modelo de componentes do menu.

139
00:10:41,165 --> 00:10:44,749
Então, indo para o arquivo de modelo de componentes do menu,

140
00:10:44,749 --> 00:10:50,090
Eu vou aplicar essa diretiva de destaque para este tapete de grade aqui.

141
00:10:50,090 --> 00:10:52,330
Então, neste bloco de grade,

142
00:10:52,330 --> 00:11:01,950
Eu aplicarei essa diretiva de atributo AppHighLight a este elemento particular aqui.

143
00:11:01,950 --> 00:11:04,485
Com isso, concluímos todas as atualizações.

144
00:11:04,485 --> 00:11:11,005
Vamos salvar as alterações e, em seguida, ir e dar uma olhada em nosso aplicativo após essa mudança.

145
00:11:11,005 --> 00:11:13,680
Indo para a nossa aplicação no navegador.

146
00:11:13,680 --> 00:11:20,270
Agora, com a aplicação da diretiva AppHighLight que acabamos de criar,

147
00:11:20,270 --> 00:11:27,050
você vai notar exatamente o que acontece quando navegamos para um elemento em nossa exibição de menu aqui.

148
00:11:27,050 --> 00:11:32,010
Então, você percebe que sempre que você passar o mouse sobre um item na exibição,

149
00:11:32,010 --> 00:11:36,770
a classe CSS destaque está sendo aplicada a cada um deles,

150
00:11:36,770 --> 00:11:41,150
em que qual item particular está sendo destacado no menu,

151
00:11:41,150 --> 00:11:46,270
para que isso dê uma melhor experiência de usuário para o usuário.

152
00:11:46,270 --> 00:11:50,719
Você pode ver que o tamanho desse elemento é sempre tão ligeiramente

153
00:11:50,719 --> 00:11:55,840
aumentado e trazido para a frente na vista aqui.

154
00:11:55,840 --> 00:11:58,910
Isso conclui a implementação de

155
00:11:58,910 --> 00:12:03,470
a diretiva de atributo personalizado que fizemos neste exercício.

156
00:12:03,470 --> 00:12:09,810
Este é um bom momento para você fazer um commit git com a diretiva de mensagem.