WcfSubcomps: modificar los componentes en tiempo de ejecución – Angular

Los componentes generados por WCF cumplen con los estándares y especificaciones de Angular, y están generados de modo de que su código sea completamente legible. Esto permite que se comporten en tiempo de ejecución tal como se espera y se puedan utilizar agregando el código necesario, como si el componente hubiera sido creado como parte del proyecto.

Sumado a eso, y sin interferir en ello, WCF provee un injectable service que permite modificar en tiempo de ejecución cualquiera de los atributos y parámetros del componente¹. Para conocer en detalle los atributos y parámetros, basta con acceder a la app-demo del componente.

Por qué un servicio adicional

En Angular y en otras plataformas de componentes es natural y fluida la interacción en tiempo real con los datos del componente y sus antecesores y descendientes de primer nivel. Pero cuando la relación es profunda o cuando los componentes pertenecen a ramas distintas la comunicación entre componentes se hace compleja.

Ese es uno de los objetivos de los servicios inyectables: permitir una comunicación fluida independientemente de la estructura de creación e inclusión de componentes en la aplicación.

WCF sigue esta línea y aporta un servicio muy liviano (no llega a las 50 líneas de código) que permite modificar todos los inputs y atributos de un componente desde cualquier parte de la aplicación. A esto suma que no se necesita agregar código adicional a los componentes para utilizarlo y de que a pesar de que viene con cada componente, está diseñado siguiendo el pattern de tree-shaking, de modo de que se incluye una sola vez en el código independientemente de la cantidad de componentes que lo incluyan.

Independizarse del proceso de rendering

El servicio WcfSubcomps incluye una cola de mensajes que espera que cada componente se “renderice” en la pantalla antes de enviar sus mensajes, de modo de que estos no se pierdan. Y lo hace utilizando Signals, lo que permite que el costo en performance sea prácticamente nulo. Esto hace muy fácil determinar programáticamente los valores por omisión y otros valores, que muchas veces dependen de servicios externos y es difícil sincronizar con el despliegue en pantalla.

En combinación con la opción de que el default del componente no incluya ni textos ni imagenes, los componentes se desplegarán en la pantalla en su tamaño original y con los textos correctos, o con placeholders vacíos.

Utilizando WcfSubcomps

Para utilizar el servicio en cualquier parte de una aplicación Angular, hay que importarlo, declarar una propiedad, inicializarla y luego invocarlo. Lo mostramos en un ejemplo².

1. Cree una nueva aplicación y ejecute la app-demo de un componente, tal como se indica en el artículo correspondiente.
2. Abra para editar el archivo src/app/app.component.ts
3. Asegúrese de importar la directiva inject y el servicio WcfSubcomps correspondiente:

import { inject } from '@angular/core';
import { WcfSubcomps } from "./wcf-subcomps/wcf-subcomps.service";

4. En la clase exportable, agregue la inicialización del servicio

export class AppComponent {
	title = 'app-demo';

	private wcfService = inject(WcfSubcomps);
}

5. Ahora ya se puede enviar mensajes a cualquiera de los componentes. Como ejemplo utilizaremos el hook ngAfterViewInit para cambiar los valores en el momento de la inicialización.
   Asumimos que su id es bloque-pestanas y que tiene un switch denominado consultas. Tiene también un subcomponente, con id enlace-volver, al que se le puede cambiar el texto usando el atributo texto_enlace.
   De esta forma se puede cambiar cualquier atributo o propiedad del componente principal y su subcomponentes. Para conocer en detalle los subcomponentes, los atributos y las propiedades, alcanza con consultar la app-demo

ngAfterViewInit () {
	this.wcfService.changeAttribute({"id":"bloque-pestanas", "consultas":"off"});
	this.wcfService.changeAttribute({"id":"bloque-pestanas.enlace-volver", "texto_enlace":"Nuevo texto del enlace"});
}

El código completo de src/app/app.component.ts quedaría así:

import { Component, inject } from '@angular/core'; 
import { WcfSubcomps } from "./wcf-subcomps/wcf-subcomps.service"; 

import { BloquePestanas } from "./bloque-pestanas/bloque-pestanas.component";

import { AppDemo } from "./app-demo-bloque-pestanas/app-demo.component";

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [BloquePestanas, AppDemo],
  template: "<app-demo></app-demo>", 
  
})
export class AppComponent {
	title = 'app-demo';

	private wcfService = inject(WcfSubcomps);
	
	ngAfterViewInit () {
		this.wcfService.changeAttribute({"id":"bloque-pestanas", "consultas":"off"});
		this.wcfService.changeAttribute({"id":"bloque-pestanas.enlace-volver", "texto_enlace":"Nuevo texto del enlace"});
	}

}

Un comentario adicional importante es que las modificaciones a un componente utilizando wcfService se pueden realizar antes de que el componente exista. El servicio garantiza que los mensajes se conserven hasta que el componente se cree, y serán recibidos correctamente. Es por ello una buena práctica alterar el componente utilizando wcfService para luego crearlo, de modo que cuando se renderice en la pantalla, ya tenga todos los textos, imágenes y campos con sus valores correspondientes.

__________________

1. El servicio inyectable, de acuerdo con las recomendaciones de Angular, implementa un Observer Pattern ↩︎
2. El código que ya existe se muestra más claro que el que hay que añadir ↩︎