Abbiamo appena avuto una breve introduzione alle direttive attributive nella lezione precedente.
Ora costruiamo una direttiva attributo personalizzato per la nostra applicazione angolare e quindi
facciamo uso di esso all'interno delle viste di alcuni dei componenti all'interno della nostra applicazione angolare.
Lungo la strada, impareremo su come possiamo creare
direttive personalizzate e usarle nella nostra applicazione angolare.
Faremo uso di Angular CLI per creare la direttiva personalizzata e, successivamente,
aggiornarlo per eseguire il tipo di
funzionalità che abbiamo bisogno fornito da questa direttiva attributo.
Sotto la mantenere la direttiva in una cartella separata denominata Direttive,
all'interno della mia cartella app.
Quindi, lasciami creare una nuova cartella denominata Direttive.
Ora, ho intenzione di creare la mia direttiva personalizzata all'interno di questa cartella Direttive.
Prenderà l'aiuto di CLI angolare per creare la nostra direttiva personalizzata.
Quindi, al prompt,
digita ng generate o g detetives/highlight.
Quindi, questa particolare direttiva sarà chiamata direttiva «Highlight».
Quindi, con questo, creeremo
una nuova direttiva chiamata direttiva highlight e poi andremo a
modificare che evidenziare i file di direttiva che
sono stati creati per creare la nostra direttiva personalizzata.
Cosa sto cercando di ottenere esattamente con questa direttiva?
Lascia che ti porti alla vista del menu all'interno della nostra applicazione Angular.
Nella vista menu,
quando voglio selezionare uno di questi elementi al momento,
non ho idea esattamente di dove mi trovo.
Ora invece, quando il mio mouse passa su uno di questi elementi nella mia lista griglia,
voglio essere in grado di evidenziare qualche elemento per indicare che se
faccio clic, selezionerò quel particolare elemento.
Quindi, questo è ciò che la funzionalità che ho intenzione di
progettare usando la mia direttiva di evidenziazione che ho appena creato.
Per fare ciò, apriamo il file direttive.ts evidenziazione.
Quindi, vedi che abbiamo l'impalcatura bare-bone disponibile per la direttiva
già qui e vedrai che abbiamo
già importato il director dal codice Angular.
Ora a questo, ho intenzione di aggiungere un paio di altre importazioni.
Quindi, importeremo ElementRef e poi importeremo Renderer2 qui.
Ora Renderer2 è disponibile solo con Angular four e versioni successive.
La versione precedente del renderer era chiamata
renderush ed è stata duplicata ora con Angular four.
Renderer2 è ora una nuova implementazione del
renderer con un migliore supporto per alcune altre funzionalità.
Quindi, applicherò il Renderer2 per creare la direttiva di evidenziazione.
Ora perché usiamo questo renderer?
Ora, quando crei direttive all'interno dell'applicazione
Angular, dalla tua applicazione Angular stessa,
anche se al momento la nostra applicazione Angular viene renderizzata principalmente nel browser,
puoi usare lo stesso codice di ponteggio per
la tua applicazione Angular per creare un'applicazione per altri scopi.
Nel corso di salto nativo che vedremo più avanti in questa specializzazione,
vedremo un altro uso di questo codice per la creazione di applicazioni che utilizzano NativeScript.
Quindi, in tal caso il rendering sarebbe fatto in un modo diverso,
non in un browser.
Quindi, dobbiamo usare questo Renderer2,
che ci permette di adattarci automaticamente
alla piattaforma appropriata su cui viene eseguito il rendering di questa vista.
Quindi, questo è il motivo per cui sto facendo uso del renderer qui.
Inoltre, un'altra cosa che voglio importare è HostListener.
HostListener ascolterà i movimenti del mouse dallo schermo
e risponderà in modo appropriato in tali circostanze.
Ne vedremo l'uso quando creeremo la direttiva tra pochi istanti.
Così ora, che abbiamo importato le cose di cui
abbiamo bisogno, stiamo andando a iniettare alcune cose nel nostro costruttore.
Quindi, prima useremo un el,
che è del tipo ElementRef e
anche il secondo che useremo è il renderer,
che è del tipo Renderer2.
Ora con questo, quello che faremo è che useremo
HostListener e quindi indicherebbero che per HostListener,
quando si verifica l'evento mouseenter,
allora chiameremo il metodo onmouseenter
e nel metodo onmouseenter, faremo qualcosa.
Allo stesso modo, creerò un altro
chiamato HostListener e mouseleave.
Quindi, quando il mouse lascia una particolare regione,
allora cosa hai intenzione di fare su mouseleave?
Faremo un'operazione diversa.
Quindi, quello che faremo è quando il mouse entra in una particolare regione, in questo caso,
stiamo usando questa direttiva attributo per evidenziare
l'elemento specifico dalla mia lista di griglia su cui il mouse è passato il mouse.
Quindi, questo è lo scopo per implementare questi
e quando il puntatore del mouse si allontana da quell'elemento,
questo non verrà più evidenziato.
Quindi, questo è lo scopo di questa direttiva,
la direttiva highlight che sto creando qui.
Quindi, quando il mouse entra in una particolare area.
Quindi, ho intenzione di utilizzare il renderer e il renderer fornisce un metodo chiamato addClass.
Quindi, questo metodo verrà utilizzato per aggiungere una classe all'elemento griglia nella mia lista griglia.
Quindi, la classe che ho intenzione di aggiungere,
il modo in cui è configurato è dirà this.el.nativeElement e
il secondo parametro è
il nome della classe che applicherai quando ti avventuri in quell'area.
Quindi, applicheremo questa classe di evidenziazione a quell'elemento quando
il mouse si sposta nella regione in cui tale elemento è reso nella vista.
Ora, la stessa cosa. Ho intenzione di fare un altro metodo quando il mouse se ne va,
rimuoverò quella classe.
Quindi, il metodo RemoveClass è supportato anche da Renderer2.
Quindi, in questo caso,
quando il mouse si sposta in quella regione,
questa classe di evidenziazione verrà aggiunta a quell'elemento della griglia.
Quando il mouse lascia quel particolare elemento della griglia,
la classe di evidenziazione verrà rimossa dagli elementi della griglia.
Quindi, questo è il modo in cui usando questa direttiva attributo,
sto aggiungendo e rimuovendo classi,
classi CSS al mio elemento griglia nella mia pagina GridView.
Ora, il passo successivo è ovviamente quello di creare questa classe chiamata come classe di evidenziazione.
Quindi, per farlo, andrò nel
file styles.scss in cui abbiamo gli stili globali memorizzati qui.
Quindi, all'interno del file styles.scss,
aggiungerò la classe CSS evidenziata lì.
La classe CSS di evidenziazione che definirò come colore di sfondo.
Applicherò background-pale,
che ho già definito in precedenza e poi,
applicherei un bordo di un pixel,
bordo solido del colore,
primary-color-scuro, che anche io ho definito in precedenza
come una variabile CSS e aumenterò anche lo z-index a uno.
Il che significa che quell'elemento verrà sollevato sopra gli elementi rimanenti in là.
Sono sicuro che dalla tua conoscenza dei CSS capisci cosa viene fatto.
Inoltre, ho intenzione di fare un po 'di trasformazione sull'oggetto lì,
ho solo intenzione di scalarlo di una piccola quantità, in
scala fino a 1,01.
Così, piccolo un po 'sollevato e poi si è presentato,
in modo che evidenzia sullo schermo.
Quindi, questa è la classe CSS che
applicherò usando la direttiva personalizzata che ho creato lì.
Ora, dove ho intenzione di applicare questa direttiva personalizzata?
Useremo questa direttiva personalizzata nel nostro file di modello di componenti del menu.
Ora, prima di farlo,
torniamo a evidenziare la direttiva e
noterai che nella direttiva highlight,
hai quel decoratore di direttiva qui dove hai una proprietà chiamata selettore,
che è stata impostata per evidenziare l'app.
Quindi, ovunque tu voglia utilizzare questa direttiva,
userai un attributo chiamato
appHighlight all'interno di quel particolare elemento nel tuo modello.
Quindi, è così che viene creata questa direttiva.
Quindi, applichiamo questa
direttiva attributo evidenziare l'applicazione all'interno del nostro file modello componenti di menu.
Quindi, andando al file del modello dei componenti del menu,
applicherò quella direttiva di evidenziazione a questa mattonella grid-tile qui.
Quindi, in questa tessera della griglia,
applicherò quella direttiva dell'attributo AppHighlight a questo particolare elemento qui.
Con questo, abbiamo completato tutti gli aggiornamenti.
Salviamo le modifiche e poi andiamo a dare un'occhiata alla nostra applicazione dopo questo cambiamento.
Andare alla nostra applicazione nel browser.
Ora, con l'applicazione della direttiva AppHighlight che abbiamo appena creato,
noterai esattamente cosa succede quando navighiamo su un elemento nella nostra vista menu qui.
Quindi, noti che ogni volta che passi il mouse su un elemento nella vista,
la classe CSS di evidenziazione viene applicata a ciascuno di essi,
per cui quale particolare elemento viene evidenziato nel menu, in
modo che ciò dia una migliore esperienza utente per l'utente.
Potete vedere che la dimensione di quell'elemento è sempre così leggermente
aumentata e portata avanti nella vista qui.
Questo completa l'implementazione
della direttiva sugli attributi personalizzati che abbiamo fatto in questo esercizio.
Questo è un buon momento per fare un commit git con la direttiva del messaggio.