Angular componentes: ¿Pasar por referencia o Pasar por valor?

En Angular, puede pasar datos del componente principal al componente secundario mediante el decorador @Input() y un componente secundario puede emitir un evento a un comentario principal mediante el decorador @Output(). Esta publicación de blog tiene como objetivo explicar si se pasa por referencia o por valor de paso en el contexto de @Input() y @Output decorador.

Para empezar, supongamos que tenemos dos componentes Angular, como se enumeran a continuación:

import { Component, Input } from '@angular/core';
@Component({
    selector: 'app-video',
    template: `
        {{data.counter}} {{count}}
     `
})
export class VideoComponent {
    @Input() data: any;
    @Input() count: number;
}

Como puede ver, tenemos dos propiedades de entrada.

1. En la propiedad de datos, pasaremos un objeto.
2. En count property, pasaremos un número.

Desde AppComponent, estamos pasando el valor de ambas propiedades, como se muestra a continuación:

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `
  <app-video [data]='data' [count]='count' ></app-video>
  `
})
export class AppComponent implements OnInit {
    data: any = {};
    count: number;
    constructor() {
    }
 
    ngOnInit() {
        this.data.counter = 1;
        this.count = 1;
    }
}

Como puede ver, estamos pasando datos (objeto) y count (número) al componente secundario. Dado que los datos se pasan como objeto, será "Pasar por referencia" y, dado que count se pasa como número, será "Pasar por valor".

Por lo tanto, pasar un objeto, matriz o similar es Pasar por referencia, y para tipos primitivos como number, es Pasar por valor.

Para entenderlo mejor, generemos dos eventos en el componente secundario, como se muestra en la lista a continuación:

import { Component, Input, EventEmitter, Output } from '@angular/core';
@Component({
    selector: 'app-video',
    template: `
        {{data.counter}} {{count}}
        <button (click)='senddata()'>send data</button>
        <button (click)='sendcount()'>send count</button>
     `
})
export class VideoComponent {
 
    @Input() data: any;
    @Input() count: number;
 
    @Output() dataEvent = new EventEmitter();
    @Output() countEvent = new EventEmitter();
 
    senddata() {
        this.dataEvent.emit(this.data);
    }
    sendcount() {
        this.countEvent.emit(this.count);
    }
}

En ambos eventos, estamos devolviendo las mismas propiedades decoradas @Input() al componente principal.  En dataEvent, los datos se devuelven y, en countEvent, count se devuelve al componente primario.

En el componente principal, estamos capturando el evento de la siguiente manera:

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `
  <app-video [data]='data' [count]='count' (dataEvent)='updateData($event)' (countEvent)='updateCount($event)' ></app-video>
  `
})
export class AppComponent implements OnInit {
    data: any = {};
    count: number;
    constructor() {
    }
 
    ngOnInit() {
        this.data.counter = 1;
        this.count = 1;
    }
 
    updateData(d) {
        d.counter = d.counter + 1;
        console.log(this.data.counter);
    }
 
    updateCount(c) {
        c = c + 1;
        console.log(this.count);
    }
}

Hablemos de las funciones updateData y updateCount. Estas funciones capturan eventos generados en el componente secundario.

En la función updateData, estamos incrementando el valor del parámetro pasado, sin embargo, dado que es un objeto, actualizará el valor de this.data y en el componente hijo, se renderizará el valor actualizado.

En la función updateCount, estamos incrementando el valor del parámetro pasado, sin embargo, dado que es de tipo primitivo, no actualizará this.count y en el componente secundario, no se producirá ningún impacto.

Como resultado al hacer clic en el botón, encontrará que el valor de los datos se incrementa pero el valor del recuento no se incrementa.

Podemos resumir que si pasamos objetos en el decorador @Input(), se pasaría como referencia, y si pasamos tipos primitivos, se pasaría como valor. Espero que este artículo te resulte útil. Gracias por leer.

 Si te ha gustado este post, compártelo. Además, si no ha realizado Infragistics Ignite UI for AngularComponentes, ¡asegúrese de hacerlo! Tienen 30+ componentes de Angular basados en material para ayudarlo a codificar aplicaciones web más rápido.