1

Muy bien, antes que nada, ya he buscado este problema como loco y he encontrado soluciones (algunas explicadas aquí) pero ninguna de ellas explica una manera eficiente de hacerlo. Así que aquí voy...

De lo que se trata

Estoy creando un modal, el cual usa ng-bootstrap. Hice un componente de un formulario para reutilizarlo en otras páginas. Puse este componente dentro del modal. Y necesito tener acceso a las variables y métodos de este componente dentro del modal desde el componente Padre. Así que puse un atributo @ViewChild dentro del componente Padre y lo asigné al Componente Hijo.

Cuando abro el modal, el componente se muestra sin problemas. El problema viene cuando el usuario da clic en el botón de Create. Cuando el usuario da click a este botón, el padre (el cual contiene el modal) pretende ejecutar el método del Hijo para que este envíe el formulario. Pero, el Padre no puede acceder a este método porque el Hijo sale como undefined aunque el modal ya se encuentra abierto.

Lo que ya he intentado

Ya intenté poner el Componente Hijo afuera del ng-template y funciona bien, pero lo necesito dentro del modal.

También intenté pasar el Componente como argumento del método Padre para que dentro de esta función ejecute el método del hijo con ayuda de ese parámetro (que viene siendo el componente hijo). Funciona, pero hace el código más sucio y trae consigo más problemas en el futuro. (De hecho, este es mi YO del futuro el cual tuvo más problemas con esta implementación)

Si alguien se pregunta qué tipo de problemas son estos, bueno, pues yo reutilizo componentes dentro del componente del formulario (el Componente Hijo) entonces, ya que este 'Componente Nieto' sigue estando dentro del modal, el problema se repite pero un nivel más profundo. Y ahora tengo que hacer lo mismo que hice en el Padre, pero ahora en el Hijo, y así...

Código (App de Stackblitz)

Aquí está una app de Stackblitz que hice. Lo intenté hacer lo más simple que pude, quitando todo el código que no era importante e aislando el problema.

Stackblitz App

El mensaje de error que me muestra

Este es el error que se muestra en la consola.

ERROR TypeError: Cannot read property 'sendClassForm' of undefined

He leído que cuando el ng-template no se ha renderizado en el DOM (como cuando el modal aún no se abre) e intentas acceder al Componente Hijo, obtienes este error porque aún no existe, pero no entiendo por qué sigue pasando si se supone que ya está abierto el modal.

Angular Version: 8.1.2

"@ng-bootstrap/ng-bootstrap": "^5.1.0"

2
  • Has mirado esta pregunta? Creo que simplemente tienes un problema de comunicación entre componentes, podrías emitir desde el hijo el evento usando un Output el 30 ago. 2019 a las 7:47
  • ¿Me podrías explicar un poco más? No sé exactamente como se podría con un Output desde el hijo. Prácticamente lo que quiero es que el Padre le diga al Hijo: «Hey, le acaban de dar clic en Crear dentro de mi modal. Ejecuta tu función de enviar los datos al servidor.» Aquí el dilema es cómo acceder a todas las propiedades del hijo desde un ng-template, que renderiza su contenido de forma diferente, sin que marque undefined. el 30 ago. 2019 a las 15:28

2 respuestas 2

0

Nota: Esta respuesta está en desarrollo, la iré editando para mejorarla conforme tenga tiempo.

La idea es la siguiente:

El padre tendrá en su plantilla algo como

<app-componente-hijo [formulario]="formGroup" (onCreate)="crear()"></app-componente-hijo>

En el código del padre tendrás la creación del modelo del formulario (la vista la dará el hijo):

constructor(..., formBuilder: FormBuilder) {
  this.formGroup = formBuilder.group({ ...});
  ...
}

crear() {
  const formulario = this.formGroup.value;
  //código que envía los datos
}

El hijo tendrá un input que será el formulario y un output que avisará cuándo se ha pulsado el botón:

@Input formulario: FormGroup;
@Output onCreate: : EventEmitter<boolean> = new EventEmitter();

Cuando el botón crear sea pulsado, sólo tienes que emitir un aviso:

<button (click)="onCreate.emit(true)">Crear</button>
1
  • Muchas gracias por tu respuesta. Lo que pasa es que yo no tengo el botón dentro del hijo. El botón lo tiene el padre, entonces no podría acceder a onCreate() que se encuentra dentro del hijo. Y no me resuelve la problemática. Sin embargo, encontré una solución. Tú y @yurzui en otra publicación que hice me dieron más o menos la idea. Ahí está explicada la solución, pero está en inglés. Entonces, haré una respuesta aquí explicando la solución. el 30 ago. 2019 a las 20:46
0

Anterior a esta pregunta, había publicado una pregunta igual pero en inglés en la otra comunidad de StackOverflow. He publicado la respuesta ahí. Está en inglés así que decidí volverla a explicar en español aquí.

Gracias a @yurzui y @pablo-lozano que me ayudaron a solucionar este problema. Y, aunque no haya sido como tal la respuesta a la problemática que tenía, me dieron la idea para esta solución, la cual considero es casi igual que tener el ViewChild, pero sin problemas.

Aquí está el código en Stackblitz, por si quieren verlo de inmediato, en lugar de leer mi explicación.

Código en Stackblitz

Componente Padre

Puse una propiedad, igual como el ViewChild, pero eliminando la parte de ViewChild().

classFormComponent: ClassFormComponent; // Sin 'ViewChild(...)'

También, creé un método para guardar, en la variable de arriba, la referencia al componente hijo cuando se necesitase.

// Este método se llamará por el componente hijo (ClassFormComponent) cuando esté listo para ser usado por el padre.
saveReference( classFormComponent: ClassFormComponent ) {
    this.classFormComponent = classFormComponent;
}

HTML del Padre

Después, le puse un listener al app-class-form para que, cuando el hijo estuviese listo, pueda decírselo al padre llamando su método saveReference() explicado arriba.

<app-class-form (componentIsReady)="saveReference( $event )"></app-class-form>

Componente Hijo

El componente hijo tiene un Output con el EventEmitter.

@Output() componentIsReady: EventEmitter<ClassFormComponent> = new EventEmitter();`

Y este evento es emitido en la fase ngOnInit del ciclo de vida del componente.

ngOnInit() {

    // En este punto, el hijo ha 'nacido' y ahora está listo para ser usado por el padre.
    this.componentIsReady.emit(this);
}

De esta manera, el padre tiene acceso a los métodos y atributos del hijo.

Ahora, el hijo es el que contacta al padre y le hace saber que ya está listo y, sólo entonces, podrá ser usado y referenciado desde el componente de su padre.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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