0

Tengo un componente que tiene a su vez dos componentes dentro, de la siguiente forma:

<componente-padre>
  <componente-hijo></componente-hijo>
  <componente-hijo></componente-hijo>
</componente-padre>

El componente hijo simplemente define una propiedad autogenerada la cual mostrará por pantalla.

@Component...
export class ComponenteHijo {
    
    valor: string;

    constructor() {
     this.valor = Date.now().toString();
    }
}

El problema está cuando ambos componentes ejecutan su constructor. El último en ejecutar su constructor, sobreescribe la propiedad valor del primero.

Adjunto una reproducción del problema: https://stackblitz.com/edit/angular-ivy-aqnkss?file=src%2Fapp%2Fcomponente-hijo%2Fcomponente-hijo.component.html

Como se puede ver en el ejemplo, ambos componentes hijo muestran el valor que han seteado, pero cuando intentas desplegar el primer menú, éste no se despliega ya que el valor del campo name, es el del segundo componente y no coincide con el primero.

¿Cual podría ser la solución?

Un saludo.

Gracias.

4 respuestas 4

1

Es muy mala práctica mezclar Angular con el tratamiendo del DOM, aunque sea sólo para suscribirse a un evento de éste.
Angular usa su propio DOM virtual, por lo que no debemos suscribirnos a eventos del DOM renderizado ni tratar de manipularlo sin pasar por Angular.

Dicho esto, podemos capturar un evento click en nuestro propio componente del siguiente modo.
componente-hijo.component.html

<div class="content" (click)="toggle()">
    <!-- Contenido -->
</div>

Ahora, podemos mantener una propiedad del componente que sirva para controlar la visi componente-hijo.component.ts

@Component({ ... })
export class ComponenteHijoComponent {
  displayed = false;
  name: string;
  
  constructor() {
    this.name = (Date.now() * Math.random()).toString();
  }

  toggle = () => {
    this.displayed = !this.displayed;
  };
}

En el HTML, por tanto, mostramos la lista solo si displayed es true

<div class="content" (click)="toggle()">
    <p>
        valor seteado: {{name}}
    </p>
    <div [class]="name" style="display:inline-block">
        <input>
        <ul *ngIf="displayed">
            <li>1</li>
            <li>2</li>
        </ul>
    </div>
</div>

Hay una segunda opción: podemos mantener el estado de los componentes hijo des del padre. Éste va a ser el encargado de controlar los eventos.
app.component.ts

interface Display {
  displayed: boolean;
}

@Component({ ... })
export class AppComponent {
  displays: Display[] = [
    { displayed: false },
    { displayed: false }
  ];

  toggleDisplay = (display: Display) => {
    display.displayed = !display.displayed;
  };
}

En la vista, renderizamos todos los Display y nos suscribimos al evento click, llamando a toggleDisplay para cada uno de ellos.
Además, la flag displayed de cada uno de los Display la vamos a pasar a cada hijo.
app.component.html

<div class="display" *ngFor="let display of displays">
    <app-componente-hijo [displayed]="display.displayed" (click)="toggleDisplay(display)">
    </app-componente-hijo>
</div>

Y, en componente-hijo.component.ts esperamos esa flag como un input.

@Component({ ... })
export class ComponenteHijoComponent {
  @Input() displayed: boolean;
  name: string;

  constructor() {
    this.name = (Date.now() * Math.random()).toString();
  }
}

Cualquiera de las dos formas te puede valer. Usa la que creas que más te convenga en tu escenario.
Lo importante es entender que si estamos trabajando con Angular, tenemos que jugar con sus propias reglas y no saltárnoslas. Para ello, primero, hay que conocer las reglas, por supuesto.

Por último,

El problema está cuando ambos componentes ejecutan su constructor. El último en ejecutar su constructor, sobreescribe la propiedad valor del primero.

Esto es falso. ComponenteHijoComponent es una clase y cada instancia de ésta ejecutará el constructor de forma aislada. Cada instancia tendrá su propio atributo name. No se están pisando en ningún momento.

Dejo un Stackblitz con la segunda implementación que comentaba.

Espero que sirva.

0

Revisando el código que expones, se observa que al componentes padre, le anexas dos veces el mismo componente hijo.

El componente del hijo tiene el siguiente código:

import { Component } from "@angular/core";

@Component({
  selector: "app-componente-hijo",
  templateUrl: "./componente-hijo.component.html",
  styleUrls: ["./componente-hijo.component.css"]
})
export class ComponenteHijoComponent {
  fecha: string;
  constructor() {
    this.fecha = (Date.now() * Math.random()).toString();
    document.body.onclick = () => {
      alert(this.fecha);
    };
  }
  click() { }
}

Revisando lo que has colocado en el constructor, se observa que le dices al body que cuando reciba un click muestre un alert y este muestre el valor.

Como tienes 2 veces el mismo componente siendo llamado, uno seguido del otro, es lógico que el valor a mostrar en el alert cambie ya que el ultimo componente en cargar está sobre escribiendo el valor del alert. Esto se debe a que el evento estás haciendolo mal, la forma correcta como deberás mostrar los valores, sería de la siguiente manera:

import { Component } from "@angular/core";

@Component({
  selector: "app-componente-hijo",
  templateUrl: "./componente-hijo.component.html",
  styleUrls: ["./componente-hijo.component.css"]
})
export class ComponenteHijoComponent {
  fecha: string;
  constructor() {
    this.fecha = (Date.now() * Math.random()).toString();
    /*document.body.onclick = () => {
      alert(this.fecha);
    };*/
  }
  
  click() {
    alert(this.fecha);
  }
}

Otra cosa que debes tener en cuenta, ya que estás haciendo esto de cargar 2 veces el mismo hijo, si deseas depronto tomar información a través del document como el document.getElementById('id') por ejemplo, ten en cuenta en que el elemento que obtengas puede ser de cualquiera de los 2 hijos, ya que ambos poseen exactamente las mismas caracteristicas.

Si deseas puedes agregarles un atributo a cada componente el cual sea como un consecutivo y así cuando anexes atributos como id o name, estos carguen con un nombre específico acompañado del consecutivo que le das. Y ya cuando desees hacer algo como obtener un elemento por su id, puedas tomar el elemento correcto.

Espero te sirva

Saludos.

1
  • Muchas gracias por tu respuesta. He editado la demo, para ampliar un poco más el caso de porqué utilizar el document.body.onclick. La razón es que quiero que el componente hijo sea un menú desplegable, pero reutilizar el componente varias veces. Para que el menú se pueda cerrar, debo detectar el click fuera de mi componente, pero al hacerlo, el valor que obtengo siempre es el de la referencia del primer componente. el 10 feb. 2021 a las 14:28
0

La solución finalmente es usar los eventos focusin y focusout en el input. Con el pequeño detalle de que el evento focusout debe llevar un setTimeout para que de tiempo al evento click de la lista a setear el valor, antes de que se cierre la misma.

0

Añadiendo a tu solución @Noel Álvarez, es cierto que lo mejor sería usar los eventos del input, pero te recomiendo que utilices una directiva que maneje eso por ti además de escalable por si en algún futuro deseas añadir mas eventos.

componente-hijo.directive.ts

import { Directive, EventEmitter, HostListener, Output } from "@angular/core";

@Directive({ selector: "[focusHijo]" })
export class ComponenteHijoDirective {
  @Output() listener: EventEmitter<boolean> = new EventEmitter<boolean>();

  @HostListener("focus", ["$event.target"])
  onFocus(event?: any) {
    console.log("in");
    this.listener.emit(true);
  }

  @HostListener("blur", ["$event.target"])
  onBlur(event?: any) {
    console.log("out");
    this.listener.emit(false);
  }
}

componente-hijo.component.html

<p>
    valor seteado: {{name}}
</p>
<div [class]="name" style="display:inline-block">
    <input focusHijo (listener)="onUpdateFocus($event)">
    <ul *ngIf="view">
        <li>1</li>
        <li>2</li>
    </ul>
</div>

componente-hijo.component.ts

 onUpdateFocus(isFocus: any) {
    this.view = isFocus;
  }

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.