hostbinding - hostlistener directive angular
Angular-¿Hay una lista de HostListener-Events? (5)
Estoy utilizando un hostlistener en una directiva para detectar "desenfoque" - y "keyup" - eventos. Ahora necesito detectar cambios en el elemento de entrada en el que se basa la directiva. Lo intenté
@HostListener(''change'', [''$event''])
pero no se dispara.
¿Hay un evento de "cambio"? También he leído que debería haber un evento de "entrada", pero que tampoco se dispara.
Entonces, mi pregunta es: ¿Existe una lista de eventos disponibles que pueda usar?
He buscado en google:
https://www.google.de/search?q=angular+2+list+of+hostlistener+events
y la documentación angular:
https://angular.io/api/core/HostListener
Pero no encontré nada.
Abra el esquema del elemento angular dom https://github.com/angular/angular/blob/master/packages/compiler/src/schema/dom_element_schema_registry.ts#L78
dónde:
- (sin prefijo): la propiedad es una cadena.
-
*
: La propiedad representa un evento. -
!
: la propiedad es un booleano. -
#
: la propiedad es un número. -
%
: la propiedad es un objeto.
Luego presiona ctrl+F
y escribe *
@HostListener
(y también (customEvent)="handler()"
) también puede escuchar eventos personalizados
El evento de change
se aplica a las selecciones .
Si lo intentó con el evento de input
y aún no funciona, entonces su directiva es el problema.
¿Lo importaste / exportaste? ¿Tienes algún error de consola? ¿Es otro evento despedido de su directiva?
La lista de eventos que puedes escuchar se puede encontrar aquí.
https://www.w3schools.com/jsref/dom_obj_event.asp
y creo que este es el mismo, pero mejor organizado (no estoy seguro si todos son válidos)
Lo siento, creo que preguntas por una lista de propiedades. Puedes usar por ejemplo
@HostListener("focus", ["$event.target"])
onFocus(target) {
console.log(target.value)
}
@HostListener("blur", ["$event.target"])
onBlur(target) {
console.log(target.value)
}
@HostListener("input", ["$event.target.value"])
onInput(value) {
console.log(value)
}
Quería una respuesta mostrando todos los siguientes:
document:keydown.escape
En el contexto de este tipo de fragmento en Angular:
import { HostListener} from ''@angular/core'';
@HostListener(''document:keydown.escape'', [''$event''])
onKeydownHandler(event: KeyboardEvent) {
}
- Este sitio web dio algunos ejemplos.
- Here hay una lista más completa.
- Here hay una descripción más genérica de las alternativas.