El componente de tabla propio no está gestionando correctamente las llamadas de servicio.
Actualmente estoy trabajando en un proyecto donde necesito un componente de tabla que se pueda implementar como ChildComponent en varios ParentComponents. Los ParentComponents pueden proporcionar datos con diferentes servicios.
Por ejemplo: Para ComponentA, la tabla muestra datos de ServiceA y para ComponentB, la tabla muestra datos de ServiceB.
Para hacer eso, mi TableComponent tiene una variable @Input() llamada dataService:
_dataSubscription: Subscription;
@Input() dataService: DataService;
// DataService es una clase abstracta. ServiceA y ServiceB implementan esta clase.
En ngOnInit(), me suscribo a dataService:
this._dataSubscription = this.dataService.getData().subscribe(
(response) => {
console.log(response)
}
);
Además, me desuscribo de dataService cada vez que el usuario cambia entre los ParentComponents:
ngOnDestroy(): void {
this._dataSubscription.unsubscribe()
}
En ParentComponentA, el primer servicio se inyecta de esta manera:
constructor(public serviceA: ServiceA){}
Y se pasa a la tabla en .html con:
(Hago lo mismo para ParentComponentB, pero en lugar de usar “serviceA: ServiceA”, uso “serviceB: ServiceB”)
Sé que no se ve muy bien, pero funciona bastante bien. El único problema es que cuando el usuario cambia de ParentComponentA a ParentComponentB, ambos métodos .getData() se llaman y console.log imprime ambos resultados. Esto podría ser un problema cuando el tamaño de los datos es cada vez mayor. ¿Hay alguna manera de resolver este problema?
Pensé que desuscribirme en ngOnDestroy funcionaba, pero no tuvo ningún efecto: aún así, console.log imprime los resultados de ambas llamadas.
Gracias de antemano.
davy.ai
Solución para evitar que el método getData() de un componente no deseado sea llamado varias veces
El problema de que se llame al método getData() de ambos ParentComponentA y ParentComponentB al alternar entre ellos se puede resolver utilizando un identificador único para cada servicio de datos. Este identificador se puede pasar junto con el servicio de datos al TableComponent como una variable Input() separada.
Por ejemplo, en el constructor de ParentComponentA, el componente puede generar un identificador único de la siguiente manera:
Luego, el tableDataIdentifier se puede pasar junto con el servicio de datos al TableComponent:
El mismo proceso se puede seguir para ParentComponentB también.
En el TableComponent, la entrada dataService sigue siendo la misma, pero se agrega una nueva variable Input() llamada tableDataIdentifier:
Ahora, en el método ngOnInit() del TableComponent, podemos modificar la suscripción para que solo se suscriba al método getData() si el tableDataIdentifier coincide con el identificador del servicio de datos entrante:
De manera similar, también podemos agregar una verificación para el identificador de ComponentB en el mismo método. El método ngOnDestroy() seguirá siendo el mismo.
Con este enfoque, solo se suscribirá al método getData() requerido, evitando así llamadas de red innecesarias y posibles degradaciones de rendimiento.