1

Tengo una situación un poco compleja y, creo, difícil de solventar que llevo días dándole vueltas sin llegar a ninguna conclusión. Todo el caso descrito es a grandes rasgos, sin entrar en detalles que realmente no son importantes (creo) y, aunque suene raro, es necesario hacerlo de esta forma.

Voy a intentar explicarlo paso a paso y de forma sencilla para que se entienda:

  • Tengo dos componentes (A y B), con una función cada uno.
  • Componente A tiene, en una variable, el nombre del componente B.
  • Función A es llamada a través de un clic y recibe como parámetro el nombre de la función B.
  • La idea es que Función A llame a Función B para que ésta se ejecute.

He estado leyendo e informándome y he visto que puedo llamar a funciones de otros componentes aunque no tengan nada que ver entre ellos, pero no sé cómo puedo hacer esto sin tener importado el Componente B en el Componente A.


¿Por qué esto es así?
El botón que ejecuta la función A se crea dinámicamente acorde al componente B, C, D, E, n. Es decir, no es un botón fijo que realice una acción, cada componente de la aplicación puede generar su propio botón (incluso más de uno) con acciones muy diferentes entre sí.

Estos botones se crean en un menú superior con acciones y funciones propias, de ahí que estén en un componente diferente al suyo.

Al crearse de forma dinámica, en el componente A, no puedo llamar directamente a la función B. De igual forma, no puedo importar en el componente A todos los demás componentes.


Por ahora, la función A recoge el nombre del componente B y de la función B, desde ahí sé que puedo fácilmente indicarle que realice la función deseada, el problema es que ambos los tengo como string. Es decir, Función A tiene "ComponenteB" y "FuncionB", me falta indicarle que eso es un componente y su función, pero no tengo ni idea de cómo podría hacerlo.

Para el componente he intentado lo siguiente, intentando ingenuamente que fuera fácil:

this.activeComponent = ('BComponent' as Component);

Sí que me indica que this.activeComponente es de tipo Component y me aparecen sus propiedades, pero, poniéndole a mano el nombre de la función, sin usar el que recojo, indica que:

Property 'funcion' does not exist on type 'Component'.

(Obviamente, la función "funcion" existe en el componente al que apunta). Entiendo que no debe ser algo tan fácil, pero no tengo muy claro si estoy intentando algo imposible o si tengo una mínima posibilidad de que se pueda hacer de alguna manera...

1 respuesta 1

1

Después de mucho investigar, he llegado a una solución junto a mis compañeros que dejaré por aquí por si alguien tratara de hacer esta locura en el futuro.

El template se ejecuta después de la compilación, por lo que no reconocerá el TypeScript, será necesario que sus eventos sean JavaScript. (Es decir, en vez de (click), ponerlo como onclick).

Al introducirse en el componente después de la compilación y como un HTML, no reconoce las funciones del componente, hay que indicarle que llamas a una función de dicho componente. Para ello, en el constructor del componente al que ahora pertenece, inicializamos una variable al componente:

constructor() { 
   Window['myComponent'] = this;
}

Y hacemos que el la llamada especifique el componente en el que está la función:

<button onclick='Window.myComponent.funcionA("funcionB")'>Botoncín</button>

Como se puede ver, la función A recibe como parámetro el nombre de la función B en un string.

En el Componente B, creamos una variable pública que, en el constructor, incializamos a la ruta activa de la siguiente manera:

public component;

constructor(public route: ActivatedRoute) {
    this.component = route.snapshot;
}

Y en su función ngOnInit, llamamos al servicio intermedio, pasándole esta variable como parámetro para que Componente A lo reciba y almacene.

Al hacer clic en el botón, se llama a la función A, quien recoge en una variable todas las funciones de Componente B gracias a la variable que Componente B le ha pasado. Recorre la lista de funciones y ejecuta la que coincida con el nombre del parámetro el botón le pasa.

public funcionA(funcionB: string): void {
  const funcionesComponenteB = this.ComponenteB.component.prototype;

  for (const method in funcionesComponenteB) {
    if (method.toString() === funcionB) {
       this.ComponenteB.component.prototype[method]();
    }
  }
}

¡Y con eso el botón llama a la función B!

No sé si ha sido un planteamiento un poco extraño o si he hecho mucho lío para alcanzar un punto al que se podía llegar fácilmente, pero, con mi poca experiencia, ha sido al único al que he llegado después de dos semanas de investigación.

Invito a que si se os ocurre una forma mejor la dejéis para ver cuál sería la forma correcta de hacerlo.

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.