Búsqueda de sitios web

angular - Angular2 por qué usar @Output en lugar de @Input para callbacks

Estoy aprendiendo Angular2, después de trabajar con Angular1 durante un par de años. Estoy creando un componente de formulario de tarjeta de crédito, con el objetivo principal de aprender un par de conceptos clave en Angular2. El componente debería manejar todo el formato y devolver un token de Stripe a través de una devolución de llamada. Me di cuenta de que puedo manejar las devoluciones de llamada de dos maneras.

Usando un parámetro @Output

En mi componente defino una variable de salida y la uso como en este ejemplo:

export class CreditCardForm{
    ....
    @Output () callback = new EventEmitter();
    ....

    doCallback(){
        this.callback.emit({data: 123});
    }
}

// Parent view
<credit-card-form (callback)="creditCardCallback($event)"></credit-card-form>

Usando una variable @Input

Sin embargo, podría simplemente pasar el método de devolución de llamada (creditCardCallback, utilizado en la plantilla principal) a una variable de entrada, así:

export class CreditCardForm{
    ....
    @Input () callback;
    ....

    doCallback(){
        this.callback({data: 123});
    }
}

// Parent view
<credit-card-form [callback]="creditCardCallback"></credit-card-form>

La pregunta

¿Por qué querría usar @Output en lugar de @Input? ¿Qué consigo al usar variables @Output en su lugar? Por lo que puedo ver, esto solo añade una sobrecarga al tener que utilizar la clase EventEmitter.

Respuesta #1

Siempre hay más de una manera de despellejar al gato. Sin embargo, en mi opinión, usar @Output tiene estos beneficios:

  • Legibilidad del código: Es más fácil conocer el flujo de datos si se utiliza el estilo recomendado.

  • Desacoplamiento: Por ejemplo, para un evento normal @Output, en tu ParentComponent, puedes tener más flexibilidad para manejar el evento despachado:

  • Por último, pero no menos importante, permite la sintaxis de plátano en caja: Supongamos que en tu ChildComponent tienes:

@Input() valorTarjetaCredito: string; @Output() cambioValorTarjetaCredito: EventEmitter<string>;

Entonces puedes tener enlace bidireccional en tu ParentComponent fácilmente:

<credit-card-form [(creditCardValue)]="creditCardVal"></credit-card-form>

Artículos relacionados