¿Cuál es el efecto de agregar el signo de dólar '$' frente al evento en Angular?
onModelUpdated($event: any) { console.log($event); }
contra
onModelUpdated(event: any) { console.log(event); }
El prefijo $
en los nombres de las variables no tiene ningún tipo de efecto. Un signo de dólar $
en JavaScript (y TypeScript por extensión) es un identificador válido para usar como parte de un nombre de variable, no tiene significado sintáctico. Se puede utilizar al principio, en medio o al final del nombre de una variable/función.
Específicamente cuando se trata de $event
y su uso en Angular, es más una convención que se heredó de los días de AngularJS. En AngularJS, las variables internas expuestas por el marco tenían el prefijo $
.
Es por eso que a veces ves event
y otras veces $event
.
Hubo una propuesta para deshacerse de él , pero no pasó nada.
Por lo tanto, es más una cuestión de estilo y convenciones, y depende de las preferencias personales/del proyecto llegar a una convención sobre si usar $event
o event
.
El uso $event
como argumento al invocar el controlador de eventos (mientras se vinculan eventos en plantillas) le permite obtener los datos del evento. Es como una especie de palabra de reserva en Angular. Si usa el evento (sin $
), obtendrá un error.
Si su controlador necesita estos datos, esa es la forma de obtener acceso.
Para que quede claro, $event
es el nombre del argumento del evento tal como se define en el marco Angular .
Las directivas principales escuchan el evento uniéndose a esta propiedad y accediendo a los datos a través del objeto
$event
.
El signo de dólar es parte del nombre, por lo tanto, debe informarse como tal. Una vez más, no es una convención que pueda seguir o no, es un nombre ya dado por el marco interno a un objeto y debe llamarlo por su nombre para poder acceder a él.
Tenga en cuenta que debe usar $event
en la plantilla html , mientras que en su clase puede redefinir el argumento de la función como desee. Ejemplo de Angular docs : la carga útil del evento se escribe necesariamente como $event
en la plantilla html src/app/item-output/item-output.component.html
<app-item-output (newItemEvent)="addItem($event)"></app-item-output>
pero luego puede llamar al argumento en su clase (por ejemplo src/app/app.component.ts
aquí) como más apropiado (en este ejemplo newItem: string
)
addItem(newItem: string) { this.items.push(newItem); }