1
00:00:03,650 --> 00:00:10,075
Abbiamo appena avuto una breve introduzione alle direttive attributive nella lezione precedente.

2
00:00:10,075 --> 00:00:16,440
Ora costruiamo una direttiva attributo personalizzato per la nostra applicazione angolare e quindi

3
00:00:16,440 --> 00:00:23,025
facciamo uso di esso all'interno delle viste di alcuni dei componenti all'interno della nostra applicazione angolare.

4
00:00:23,025 --> 00:00:26,340
Lungo la strada, impareremo su come possiamo creare

5
00:00:26,340 --> 00:00:30,795
direttive personalizzate e usarle nella nostra applicazione angolare.

6
00:00:30,795 --> 00:00:36,275
Faremo uso di Angular CLI per creare la direttiva personalizzata e, successivamente,

7
00:00:36,275 --> 00:00:39,830
aggiornarlo per eseguire il tipo di

8
00:00:39,830 --> 00:00:45,245
funzionalità che abbiamo bisogno fornito da questa direttiva attributo.

9
00:00:45,245 --> 00:00:51,220
Sotto la mantenere la direttiva in una cartella separata denominata Direttive,

10
00:00:51,220 --> 00:00:52,700
all'interno della mia cartella app.

11
00:00:52,700 --> 00:00:56,805
Quindi, lasciami creare una nuova cartella denominata Direttive.

12
00:00:56,805 --> 00:01:02,820
Ora, ho intenzione di creare la mia direttiva personalizzata all'interno di questa cartella Direttive.

13
00:01:02,820 --> 00:01:07,170
Prenderà l'aiuto di CLI angolare per creare la nostra direttiva personalizzata.

14
00:01:07,170 --> 00:01:08,495
Quindi, al prompt,

15
00:01:08,495 --> 00:01:20,400
digita ng generate o g detetives/highlight.

16
00:01:20,780 --> 00:01:26,110
Quindi, questa particolare direttiva sarà chiamata direttiva «Highlight».

17
00:01:26,110 --> 00:01:28,790
Quindi, con questo, creeremo

18
00:01:28,790 --> 00:01:34,460
una nuova direttiva chiamata direttiva highlight e poi andremo a

19
00:01:34,460 --> 00:01:38,600
modificare che evidenziare i file di direttiva che

20
00:01:38,600 --> 00:01:43,175
sono stati creati per creare la nostra direttiva personalizzata.

21
00:01:43,175 --> 00:01:46,895
Cosa sto cercando di ottenere esattamente con questa direttiva?

22
00:01:46,895 --> 00:01:52,910
Lascia che ti porti alla vista del menu all'interno della nostra applicazione Angular.

23
00:01:52,910 --> 00:01:54,355
Nella vista menu,

24
00:01:54,355 --> 00:01:58,420
quando voglio selezionare uno di questi elementi al momento,

25
00:01:58,420 --> 00:02:01,495
non ho idea esattamente di dove mi trovo.

26
00:02:01,495 --> 00:02:08,520
Ora invece, quando il mio mouse passa su uno di questi elementi nella mia lista griglia,

27
00:02:08,520 --> 00:02:13,340
voglio essere in grado di evidenziare qualche elemento per indicare che se

28
00:02:13,340 --> 00:02:15,870
faccio clic, selezionerò quel particolare elemento.

29
00:02:15,870 --> 00:02:19,220
Quindi, questo è ciò che la funzionalità che ho intenzione di

30
00:02:19,220 --> 00:02:23,825
progettare usando la mia direttiva di evidenziazione che ho appena creato.

31
00:02:23,825 --> 00:02:28,410
Per fare ciò, apriamo il file direttive.ts evidenziazione.

32
00:02:28,410 --> 00:02:33,935
Quindi, vedi che abbiamo l'impalcatura bare-bone disponibile per la direttiva

33
00:02:33,935 --> 00:02:36,500
già qui e vedrai che abbiamo

34
00:02:36,500 --> 00:02:39,845
già importato il director dal codice Angular.

35
00:02:39,845 --> 00:02:45,230
Ora a questo, ho intenzione di aggiungere un paio di altre importazioni.

36
00:02:45,230 --> 00:02:52,055
Quindi, importeremo ElementRef e poi importeremo Renderer2 qui.

37
00:02:52,055 --> 00:02:57,215
Ora Renderer2 è disponibile solo con Angular four e versioni successive.

38
00:02:57,215 --> 00:02:59,710
La versione precedente del renderer era chiamata

39
00:02:59,710 --> 00:03:04,290
renderush ed è stata duplicata ora con Angular four.

40
00:03:04,290 --> 00:03:06,920
Renderer2 è ora una nuova implementazione del

41
00:03:06,920 --> 00:03:11,030
renderer con un migliore supporto per alcune altre funzionalità.

42
00:03:11,030 --> 00:03:18,045
Quindi, applicherò il Renderer2 per creare la direttiva di evidenziazione.

43
00:03:18,045 --> 00:03:20,005
Ora perché usiamo questo renderer?

44
00:03:20,005 --> 00:03:23,690
Ora, quando crei direttive all'interno dell'applicazione

45
00:03:23,690 --> 00:03:25,640
Angular, dalla tua applicazione Angular stessa,

46
00:03:25,640 --> 00:03:30,750
anche se al momento la nostra applicazione Angular viene renderizzata principalmente nel browser,

47
00:03:30,750 --> 00:03:33,740
puoi usare lo stesso codice di ponteggio per

48
00:03:33,740 --> 00:03:37,420
la tua applicazione Angular per creare un'applicazione per altri scopi.

49
00:03:37,420 --> 00:03:42,985
Nel corso di salto nativo che vedremo più avanti in questa specializzazione,

50
00:03:42,985 --> 00:03:50,385
vedremo un altro uso di questo codice per la creazione di applicazioni che utilizzano NativeScript.

51
00:03:50,385 --> 00:03:54,470
Quindi, in tal caso il rendering sarebbe fatto in un modo diverso,

52
00:03:54,470 --> 00:03:56,160
non in un browser.

53
00:03:56,160 --> 00:04:00,455
Quindi, dobbiamo usare questo Renderer2,

54
00:04:00,455 --> 00:04:03,710
che ci permette di adattarci automaticamente

55
00:04:03,710 --> 00:04:08,120
alla piattaforma appropriata su cui viene eseguito il rendering di questa vista.

56
00:04:08,120 --> 00:04:13,320
Quindi, questo è il motivo per cui sto facendo uso del renderer qui.

57
00:04:13,660 --> 00:04:20,460
Inoltre, un'altra cosa che voglio importare è HostListener.

58
00:04:20,460 --> 00:04:24,650
HostListener ascolterà i movimenti del mouse dallo schermo

59
00:04:24,650 --> 00:04:28,755
e risponderà in modo appropriato in tali circostanze.

60
00:04:28,755 --> 00:04:34,099
Ne vedremo l'uso quando creeremo la direttiva tra pochi istanti.

61
00:04:34,099 --> 00:04:37,010
Così ora, che abbiamo importato le cose di cui

62
00:04:37,010 --> 00:04:40,620
abbiamo bisogno, stiamo andando a iniettare alcune cose nel nostro costruttore.

63
00:04:40,620 --> 00:04:47,180
Quindi, prima useremo un el,

64
00:04:47,180 --> 00:04:52,625
che è del tipo ElementRef e

65
00:04:52,625 --> 00:04:59,569
anche il secondo che useremo è il renderer,

66
00:04:59,569 --> 00:05:04,265
che è del tipo Renderer2.

67
00:05:04,265 --> 00:05:11,254
Ora con questo, quello che faremo è che useremo

68
00:05:11,254 --> 00:05:20,360
HostListener e quindi indicherebbero che per HostListener,

69
00:05:20,360 --> 00:05:28,094
quando si verifica l'evento mouseenter,

70
00:05:28,094 --> 00:05:38,340
allora chiameremo il metodo onmouseenter

71
00:05:38,340 --> 00:05:41,400
e nel metodo onmouseenter, faremo qualcosa.

72
00:05:41,400 --> 00:05:43,790
Allo stesso modo, creerò un altro

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

74
00:05:55,005 --> 00:05:58,310
Quindi, quando il mouse lascia una particolare regione,

75
00:05:58,310 --> 00:06:02,790
allora cosa hai intenzione di fare su mouseleave?

76
00:06:02,950 --> 00:06:06,470
Faremo un'operazione diversa.

77
00:06:06,470 --> 00:06:11,660
Quindi, quello che faremo è quando il mouse entra in una particolare regione, in questo caso,

78
00:06:11,660 --> 00:06:15,710
stiamo usando questa direttiva attributo per evidenziare

79
00:06:15,710 --> 00:06:22,130
l'elemento specifico dalla mia lista di griglia su cui il mouse è passato il mouse.

80
00:06:22,130 --> 00:06:24,935
Quindi, questo è lo scopo per implementare questi

81
00:06:24,935 --> 00:06:28,050
e quando il puntatore del mouse si allontana da quell'elemento,

82
00:06:28,050 --> 00:06:29,580
questo non verrà più evidenziato.

83
00:06:29,580 --> 00:06:31,575
Quindi, questo è lo scopo di questa direttiva,

84
00:06:31,575 --> 00:06:33,850
la direttiva highlight che sto creando qui.

85
00:06:33,850 --> 00:06:40,715
Quindi, quando il mouse entra in una particolare area.

86
00:06:40,715 --> 00:06:47,245
Quindi, ho intenzione di utilizzare il renderer e il renderer fornisce un metodo chiamato addClass.

87
00:06:47,245 --> 00:06:55,990
Quindi, questo metodo verrà utilizzato per aggiungere una classe all'elemento griglia nella mia lista griglia.

88
00:06:55,990 --> 00:06:58,755
Quindi, la classe che ho intenzione di aggiungere,

89
00:06:58,755 --> 00:07:08,160
il modo in cui è configurato è dirà this.el.nativeElement e

90
00:07:08,160 --> 00:07:12,260
il secondo parametro è

91
00:07:12,260 --> 00:07:17,240
il nome della classe che applicherai quando ti avventuri in quell'area.

92
00:07:17,240 --> 00:07:21,965
Quindi, applicheremo questa classe di evidenziazione a quell'elemento quando

93
00:07:21,965 --> 00:07:27,425
il mouse si sposta nella regione in cui tale elemento è reso nella vista.

94
00:07:27,425 --> 00:07:34,765
Ora, la stessa cosa. Ho intenzione di fare un altro metodo quando il mouse se ne va,

95
00:07:34,765 --> 00:07:37,200
rimuoverò quella classe.

96
00:07:37,200 --> 00:07:41,275
Quindi, il metodo RemoveClass è supportato anche da Renderer2.

97
00:07:41,275 --> 00:07:42,530
Quindi, in questo caso,

98
00:07:42,530 --> 00:07:44,780
quando il mouse si sposta in quella regione,

99
00:07:44,780 --> 00:07:49,270
questa classe di evidenziazione verrà aggiunta a quell'elemento della griglia.

100
00:07:49,270 --> 00:07:52,250
Quando il mouse lascia quel particolare elemento della griglia,

101
00:07:52,250 --> 00:07:54,890
la classe di evidenziazione verrà rimossa dagli elementi della griglia.

102
00:07:54,890 --> 00:07:57,685
Quindi, questo è il modo in cui usando questa direttiva attributo,

103
00:07:57,685 --> 00:08:00,540
sto aggiungendo e rimuovendo classi,

104
00:08:00,540 --> 00:08:06,840
classi CSS al mio elemento griglia nella mia pagina GridView.

105
00:08:06,840 --> 00:08:12,070
Ora, il passo successivo è ovviamente quello di creare questa classe chiamata come classe di evidenziazione.

106
00:08:12,070 --> 00:08:16,535
Quindi, per farlo, andrò nel

107
00:08:16,535 --> 00:08:21,495
file styles.scss in cui abbiamo gli stili globali memorizzati qui.

108
00:08:21,495 --> 00:08:23,900
Quindi, all'interno del file styles.scss,

109
00:08:23,900 --> 00:08:32,385
aggiungerò la classe CSS evidenziata lì.

110
00:08:32,385 --> 00:08:37,340
La classe CSS di evidenziazione che definirò come colore di sfondo.

111
00:08:37,340 --> 00:08:42,825
Applicherò background-pale,

112
00:08:42,825 --> 00:08:46,810
che ho già definito in precedenza e poi,

113
00:08:46,810 --> 00:08:52,140
applicherei un bordo di un pixel,

114
00:08:52,140 --> 00:08:55,780
bordo solido del colore,

115
00:08:55,860 --> 00:09:04,595
primary-color-scuro, che anche io ho definito in precedenza

116
00:09:04,595 --> 00:09:13,335
come una variabile CSS e aumenterò anche lo z-index a uno.

117
00:09:13,335 --> 00:09:18,750
Il che significa che quell'elemento verrà sollevato sopra gli elementi rimanenti in là.

118
00:09:18,750 --> 00:09:24,790
Sono sicuro che dalla tua conoscenza dei CSS capisci cosa viene fatto.

119
00:09:24,790 --> 00:09:31,870
Inoltre, ho intenzione di fare un po 'di trasformazione sull'oggetto lì,

120
00:09:31,870 --> 00:09:36,495
ho solo intenzione di scalarlo di una piccola quantità, in

121
00:09:36,495 --> 00:09:39,570
scala fino a 1,01.

122
00:09:39,570 --> 00:09:42,220
Così, piccolo un po 'sollevato e poi si è presentato,

123
00:09:42,220 --> 00:09:46,115
in modo che evidenzia sullo schermo.

124
00:09:46,115 --> 00:09:50,370
Quindi, questa è la classe CSS che

125
00:09:50,370 --> 00:09:54,535
applicherò usando la direttiva personalizzata che ho creato lì.

126
00:09:54,535 --> 00:09:57,530
Ora, dove ho intenzione di applicare questa direttiva personalizzata?

127
00:09:57,530 --> 00:10:04,340
Useremo questa direttiva personalizzata nel nostro file di modello di componenti del menu.

128
00:10:04,340 --> 00:10:06,170
Ora, prima di farlo,

129
00:10:06,170 --> 00:10:08,840
torniamo a evidenziare la direttiva e

130
00:10:08,840 --> 00:10:11,610
noterai che nella direttiva highlight,

131
00:10:11,610 --> 00:10:17,555
hai quel decoratore di direttiva qui dove hai una proprietà chiamata selettore,

132
00:10:17,555 --> 00:10:20,355
che è stata impostata per evidenziare l'app.

133
00:10:20,355 --> 00:10:23,360
Quindi, ovunque tu voglia utilizzare questa direttiva,

134
00:10:23,360 --> 00:10:25,430
userai un attributo chiamato

135
00:10:25,430 --> 00:10:30,110
appHighlight all'interno di quel particolare elemento nel tuo modello.

136
00:10:30,110 --> 00:10:33,940
Quindi, è così che viene creata questa direttiva.

137
00:10:33,940 --> 00:10:36,910
Quindi, applichiamo questa

138
00:10:36,910 --> 00:10:41,165
direttiva attributo evidenziare l'applicazione all'interno del nostro file modello componenti di menu.

139
00:10:41,165 --> 00:10:44,749
Quindi, andando al file del modello dei componenti del menu,

140
00:10:44,749 --> 00:10:50,090
applicherò quella direttiva di evidenziazione a questa mattonella grid-tile qui.

141
00:10:50,090 --> 00:10:52,330
Quindi, in questa tessera della griglia,

142
00:10:52,330 --> 00:11:01,950
applicherò quella direttiva dell'attributo AppHighlight a questo particolare elemento qui.

143
00:11:01,950 --> 00:11:04,485
Con questo, abbiamo completato tutti gli aggiornamenti.

144
00:11:04,485 --> 00:11:11,005
Salviamo le modifiche e poi andiamo a dare un'occhiata alla nostra applicazione dopo questo cambiamento.

145
00:11:11,005 --> 00:11:13,680
Andare alla nostra applicazione nel browser.

146
00:11:13,680 --> 00:11:20,270
Ora, con l'applicazione della direttiva AppHighlight che abbiamo appena creato,

147
00:11:20,270 --> 00:11:27,050
noterai esattamente cosa succede quando navighiamo su un elemento nella nostra vista menu qui.

148
00:11:27,050 --> 00:11:32,010
Quindi, noti che ogni volta che passi il mouse su un elemento nella vista,

149
00:11:32,010 --> 00:11:36,770
la classe CSS di evidenziazione viene applicata a ciascuno di essi,

150
00:11:36,770 --> 00:11:41,150
per cui quale particolare elemento viene evidenziato nel menu, in

151
00:11:41,150 --> 00:11:46,270
modo che ciò dia una migliore esperienza utente per l'utente.

152
00:11:46,270 --> 00:11:50,719
Potete vedere che la dimensione di quell'elemento è sempre così leggermente

153
00:11:50,719 --> 00:11:55,840
aumentata e portata avanti nella vista qui.

154
00:11:55,840 --> 00:11:58,910
Questo completa l'implementazione

155
00:11:58,910 --> 00:12:03,470
della direttiva sugli attributi personalizzati che abbiamo fatto in questo esercizio.

156
00:12:03,470 --> 00:12:09,810
Questo è un buon momento per fare un commit git con la direttiva del messaggio.