Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

224
Views
Por qué pasar $event en Angular (cuando se trata de eventos DOM) es una práctica dudosa

Estaba leyendo la documentación de Angular 2 donde encontré :

Pasar el evento $ no es una buena práctica

Escribir el objeto de evento revela una objeción importante para pasar todo el evento DOM al método: el componente tiene demasiado conocimiento de los detalles de la plantilla. No puede extraer información sin saber más de lo que debería sobre la implementación de HTML. Eso rompe la separación de preocupaciones entre la plantilla (lo que ve el usuario) y el componente (cómo la aplicación procesa los datos del usuario).

Por alguna razón, no puedo encajar exactamente en mi cabeza lo que dice. Parece que no hay ninguna explicación disponible en ninguna parte.

¿Alguien puede explicar el significado exacto de esto en términos más simples (con un ejemplo, si es posible)?

about 4 years ago · Santiago Trujillo
1 answers
Answer question

0

Mire los ejemplos que los documentos ya proporcionan antes y después:

 @Component({ selector: 'key-up1', template: ` <input #box (keyup)="onKey($event)"> <p>{{values}}</p> ` }) export class KeyUpComponent_v1 { values = ''; onKey(event: KeyboardEvent) { this.values += (<HTMLInputElement>event.target).value + ' | '; } }

Aquí el componente tiene que saber que el evento tiene un objetivo, que es un elemento de entrada, que tiene un valor. Ahora v2:

 @Component({ selector: 'key-up2', template: ` <input #box (keyup)="onKey(box.value)"> <p>{{values}}</p> ` }) export class KeyUpComponent_v2 { values = ''; onKey(value: string) { this.values += value + ' | '; } }

Aquí la plantilla es responsable de extraer el valor correcto de su propia estructura, y todo lo que el componente sabe es que está obteniendo una cadena. Ahora imagina:

  1. Debe cambiar el elemento de input a una select para restringir el rango de entradas. ¿Qué tiene que cambiar en cada versión? ¿Solo la plantilla, o el componente también tiene que cambiar?

  2. Quiere probar el método de manipulación. ¿Qué tan fácil es esto para cada versión? ¿Puede simplemente pasar una cadena o tiene que construir un evento con un elemento de la estructura apropiada?

Esto es lo que realmente significa la separación de preocupaciones: ¿hasta dónde se propaga un cambio? ¿Cuánto necesita saber cada pieza de su sistema sobre las otras piezas para seguir funcionando? Según Wikipedia , por ejemplo:

De especial valor es la capacidad de mejorar o modificar posteriormente una sección de código sin tener que conocer los detalles de otras secciones y sin tener que realizar los cambios correspondientes en esas secciones.


Sin embargo, como sugiere snorkpete , tenga en cuenta que la reserva sobre pasar $event a métodos de componentes solo se aplica cuando $event se refiere a eventos DOM. En el caso de que esté utilizando un EventEmitter para generar sus propios eventos, $event será (lo más probable) un objeto del dominio comercial, y se puede usar perfectamente tal como está.

about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!