0

Tengo un componente hijo al cual debo pasar varios datos, los cuales recibe el componente hijo mediante @Input(). Me gustaría saber cómo asignar valores por defecto a estos atributos, de modo que no haga falta que le pase todos los atributos si estos coinciden con los valores por defecto.

Ejemplo: Si el componente hijo recibe: @Input() disabled: boolean; ¿Cómo puedo hacer para que si no le paso nada al componente este tenga el valor false?

1 respuesta 1

0

Este tema es bien interesante, para mostrar como funciona se va a mostrar en los ejemplos el uso de dos lifecycle hooks(ciclos de vida de un componente).

Cuando se asigna un valor por defecto a un @Input este valor se asigna cuando no se inyecta el valor desde otro componente.

Ahora vamos a ver algun codigo que muestre esta situacion en accion.

@Component({
  selector: 'componenteEjemplo',
})
export class ComponenteEjemplo implements OnChanges, OnInit {
  @Input() propiedad: boolean = false;

  ngOnChanges(changes) {
    console.log('Cambio en el valor', changes.propiedad.currentValue, changes.propiedad.previousValue);
  }

  ngOnInit() {
    console.log('Valor al inicializar', this.propiedad);
  }

}

Escenario 1:

Componente es usado en el html sin el uso de la propiedad.

<componente-ejemplo></componente-ejemplo>

Resultado: En la consola veremos Valor al inicializar: false

Esto dice que onChange no fue activado. Init fue activado y se obtuvo el resultado esperado.

Escenario 2:

Componente usado inyectando el valor en el html.

<componente-ejemplo  [propiedad]="true"></componente-ejemplo>

Resultado:

En la consola vamos a ver algo asi,

Cambio en el valor:true, undefined.

Valor al inicializar: true

Aca vamos a ver un comportamiento distinto y es que el primer evento en ejecutar es onChange, y esto agrega el valor true y el valor previo es undefined. Solo despues que esta asignacion sucede Init es ejecutado y obtiene el valor true asignado en el evento onChange.

Espero esta solucion le ayude.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.