Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

237
Visualizações
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)?

over 4 years ago · Santiago Trujillo
1 Respostas
Responde à pergunta

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á.

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda