Acabamos de tener una breve introducción a las directivas de atributos en la conferencia anterior.
Vamos a construir ahora una directiva de atributos personalizados para nuestra aplicación angular y luego
hacer uso de ella dentro de las vistas de algunos de los componentes dentro de nuestra aplicación angular.
En el camino, aprenderemos acerca de cómo podemos crear directivas personalizadas
y usarlas en nuestra aplicación Angular.
Haremos uso de Angular CLI para crear la directiva personalizada y, a partir de entonces,
la actualizaremos para realizar el tipo de características
que necesitamos proporcionadas por esta directiva de atributos.
Bajo la directiva mantener la directiva en una carpeta separada llamada Directivas,
dentro de mi carpeta de aplicación.
Por lo tanto, permítanme crear una nueva carpeta llamada Directivas.
Ahora, voy a crear mi directiva personalizada dentro de esta carpeta Directivas.
Tomará la ayuda de angular CLI para crear nuestra directiva personalizada.
Entonces, en el prompt,
type ng generate o g detectives/highlight.
Por lo tanto, esta directiva en particular va a ser llamada la directiva más destacada.
Así que con esto, vamos a crear
una nueva directiva llamada la directiva resaltada y luego ahora vamos a ir
y editar los archivos de directiva resaltados que
han sido creados para crear nuestra directiva personalizada.
¿Qué estoy tratando de lograr exactamente con esta directiva?
Déjame llevarte a la vista del menú dentro de nuestra aplicación Angular.
En la vista del menú,
cuando quiero seleccionar cualquiera de estos elementos actualmente,
no tengo ni idea exactamente de dónde estoy.
Ahora en su lugar, cuando mi mouse se desplaza sobre cualquiera de estos elementos en mi lista de cuadrícula,
quiero poder resaltar algún elemento para indicar que si hago clic,
voy a seleccionar ese elemento en particular.
Entonces, eso es lo que la funcionalidad que voy a diseñar
usando mi directiva de resaltado que acabo de crear.
Para hacer eso, vamos a abrir el archivo directive.ts de resaltado.
Así que, verá que tenemos el andamio de huesos desnudos disponible para la directiva
ya aquí y verá que hemos
ya importado el director del código Angular.
Ahora a esto, voy a añadir algunas importaciones más.
Por lo tanto, importaremos ElementRF y luego importaremos Renderer2 aquí.
Ahora Renderer2 sólo está disponible con Angular cuatro y superior.
La versión anterior del renderizador se llamaba
renderush y ahora se ha duplicado con Angular four.
Renderer2 es ahora una nueva implementación de renderizador
con mejor soporte para algunas otras características.
Entonces, voy a aplicar el Renderer2 para crear la directiva de resaltado.
Ahora, ¿por qué usamos este renderizador?
Ahora, cuando crea directivas dentro de su aplicación Angular,
desde su propia aplicación Angular,
aunque en este momento nuestra aplicación Angular se está procesando principalmente en el navegador,
puede usar el mismo código de andamio para
su aplicación Angular para crear una aplicación para otros fines.
En el curso de salto nativo que veremos más adelante en esta especialización,
veremos otro uso de este código para crear aplicaciones usando NativeScript.
Entonces, en ese caso, el renderizado se haría de una manera diferente,
no en un navegador.
Por lo tanto, necesitamos usar este Renderer2,
que nos permite adaptarnos automáticamente a
la plataforma apropiada en la que se está haciendo el renderizado de esta vista.
Entonces, esa es la razón por la que estoy haciendo uso del renderizador aquí.
Además, una cosa más que quiero importar es el HostListener.
El HostListener escuchará los movimientos del ratón desde la pantalla
y responderá adecuadamente en esas circunstancias.
Veremos el uso de estos cuando creamos la directiva en unos momentos.
Así que ahora, que hemos importado las cosas que necesitamos,
vamos a inyectar algunas cosas en nuestro constructor.
Entonces, primero usaremos un el,
que es del tipo ElementF y
también el segundo que usaremos es el renderizador,
que es del tipo Renderer2.
Ahora con esto, lo que vamos a hacer es que usaremos
el HostListener y luego indicarían que para el HostListener,
cuando ocurra el evento mouseenter,
entonces llamaremos al método onmouseenter
y en el método onmouseenter, vamos a hacer algo.
Del mismo modo, crearé otro
llamado HostListener y mouseleave.
Así que cuando el ratón sale de una región en particular,
, entonces, ¿qué vas a hacer en mouseleave?
Vamos a hacer una operación diferente.
Entonces, lo que vamos a hacer es cuando el ratón entre en una región en particular, en este caso,
estamos usando esta directiva de atributos para resaltar
el elemento específico de mi lista de cuadrícula en el que el mouse se ha desplazado.
Entonces, ese es el propósito para implementar estos
y cuando el puntero del mouse se aleja de ese elemento,
eso ya no se resaltará.
Entonces, ese es el propósito de esta directiva,
la directiva más destacada que estoy creando aquí.
Entonces, cuando el ratón entra en un área en particular.
Entonces, voy a usar el renderizador y el renderizador proporciona un método llamado addClass.
Entonces, este método se usará para agregar una clase al elemento de cuadrícula en mi lista de cuadrícula.
Entonces, la clase que voy a agregar,
la forma en que está configurada es dirá this.el.nativeElement y
el segundo parámetro es
el nombre de la clase que va a aplicar cuando se aventura en esa área.
Por lo tanto, aplicaremos esta clase de resaltado a ese elemento cuando
el mouse se mueva a la región donde ese elemento se representa en la vista.
Ahora, lo mismo. Voy a hacer otro método cuando el mouse se vaya,
Eliminaré esa clase.
Por lo tanto, el método RemoveClass también es compatible con Renderer2.
Entonces, en este caso,
cuando el mouse se mueva a esa región,
esta clase de resaltado se agregará a ese elemento de cuadrícula.
Cuando el ratón deja ese elemento de cuadrícula en particular,
la clase de resaltado se eliminará de los elementos de cuadrícula.
Entonces, así es como al usar esta directiva de atributos,
estoy agregando y eliminando clases,
clases CSS a mi elemento de cuadrícula en mi página GridView.
Ahora, el siguiente paso es, por supuesto, crear esta clase llamada como la clase de resaltado.
Entonces, para hacer eso, entraré en el archivo styles.scss
donde tenemos los estilos globales almacenados aquí.
Entonces, dentro del archivo styles.scss,
agregaré allí la clase CSS resaltada.
La clase CSS resaltada que definiré como color de fondo.
Voy a aplicar background-pale,
que ya he definido antes y luego,
Yo aplicaría un borde de un píxel,
borde sólido del color,
primary-color-dark, que también he definido anteriormente
como una variable CSS y también aumentaré el índice z a uno.
Lo que significa que ese artículo se levantará sobre los artículos restantes allí.
Estoy seguro de que por su conocimiento de CSS entiende lo que se está haciendo.
Además, voy a hacer un poco de transformación en el artículo allí,
Sólo voy a escalarlo en una pequeña cantidad,
por escalarlo hasta 1.01.
Así que, un pequeño poco levantado y luego apareció,
para que lo resalta en la pantalla.
Entonces, esta es la clase CSS que
voy a aplicar usando la directiva personalizada que he creado allí.
Ahora, ¿dónde voy a aplicar esta directiva personalizada?
Vamos a utilizar esta directiva personalizada en nuestro archivo de plantilla de componentes de menú.
Ahora, antes de hacer eso,
volvamos a resaltar la directiva y
notarías que en la directiva resaltada,
tienes ese decorador de directivas aquí donde tienes una propiedad llamada selector,
que se ha configurado para resaltar la aplicación.
Por lo tanto, donde quiera usar esta directiva,
usará un atributo llamado
appHighlight dentro de ese elemento particular en su plantilla.
Entonces, así es como se crea esta directiva.
Por lo tanto, vamos a aplicar esta aplicación resaltado atributo
directiva dentro de nuestro archivo de plantilla de componentes de menú.
Entonces, yendo al archivo de plantilla de componentes del menú,
voy a aplicar esa directiva resaltada a este mosaico de rejilla de mat-rejilla aquí.
Entonces, en este mosaico de cuadrícula,
aplicaré esa directiva de atributos AppHighlight a este elemento particular aquí.
Con esto, hemos completado todas las actualizaciones.
Guardemos los cambios y luego vayamos a echar un vistazo a nuestra aplicación después de este cambio.
Ir a nuestra aplicación en el navegador.
Ahora, con la aplicación de la directiva AppHighlight que acabamos de crear,
notará exactamente lo que sucede cuando navegamos hacia un elemento en nuestra vista de menú aquí.
Por lo tanto, nota que cada vez que pasa el cursor sobre un elemento en la vista,
la clase CSS resaltada se está aplicando a cada uno de ellos,
por lo que qué elemento en particular se está resaltando en el menú,
para que esto proporcione una mejor experiencia de usuario para el usuario.
Se puede ver que el tamaño de ese elemento es cada vez tan ligeramente aumentado
y presentado en la vista aquí.
Esto completa la implementación de
la directiva de atributos personalizados que hicimos en este ejercicio.
Este es un buen momento para que hagas un commit de git con la directiva de mensajes.