hostbinding - hostlistener directive angular

Angular-¿Hay una lista de HostListener-Events?

Question

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.

Answer 1

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

Example

Answer 2

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?

Answer 3

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)

https://developer.mozilla.org/en-US/docs/Web/Events

Answer 4

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)
}

Answer 5

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) {
}

1. Este sitio web dio algunos ejemplos.
2. Here hay una lista más completa.
3. Here hay una descripción más genérica de las alternativas.