Antes de entrar en los decoradores de propiedades de HostListener y HostBinding, echemos un vistazo al elemento anfitrión.
El concepto de elemento anfitrión se aplica tanto a instrucciones como a componentes. Para las instrucciones, el concepto es bastante sencillo. El elemento que aplica la instrucción es el elemento anfitrión. Supongamos que hemos declarado una directiva de Resaltado (selector: '[exeHighlight]'):
En el código HTML anterior, el elemento p es el elemento anfitrión. Si la directiva se aplica a un componente personalizado, como:
En este caso, el elemento personalizado del contador de exes es el elemento anfitrión.
HostListener es un decorador de viviendas que añade elementos de escucha de eventos al anfitrión.
En Angular, podemos usar el decorador HostBinding para implementar la vinculación de propiedades de elementos.
Esta directiva demuestra cómo usar el decorador HostListener para escuchar eventos de clics de usuario
Además, también podemos escuchar eventos generados por objetos distintos al elemento anfitrión, como ventana, documento o cuerpo
El objetivo puede ser ventana, documento o cuerpo
@HostBinding() y @HostListener() son útiles para personalizar instrucciones. @HostBinding() puede añadir clases, estilos, atributos, etc. al elemento anfitrión del comando, mientras que @HostListener() puede escuchar eventos en el elemento anfitrión.
Ejemplo: Implementa un color de fuente y borde que cambie el color de la fuente y del borde en tiempo real mientras escribes
Hablemos de la parte principal del código anterior:
(1): Nombra nuestra app de comando Rainbow
(2): Definir todos los colores posibles que necesitamos mostrar
(3): Definir y decorar color y bordeColor con @HostBinding() para el estilismo
(4): Usa @HostListener() para escuchar el evento de teclado abajo del elemento anfitrión y asigna colores aleatoriamente a color y bordeColor
Usa este comando en la página:
El efecto es el siguiente:
|
Publicado en 26/6/2019 14:42:08
|
|
|
|
