martes 8 octubre 2024

Cómo gestionar la carga de datos con Resolver en Angular

El uso de Resolver en Angular permite gestionar la carga de datos antes de que un componente sea mostrado. Los resolvers se utilizan para obtener información de servicios o APIs y preparar los datos requeridos para una vista, asegurando que el componente se cargue con toda la información lista.

¿Qué es un Resolver en Angular?

En Angular, un Resolver es un servicio que implementa la interfaz Resolve<T>. Se utiliza junto con las rutas para precargar datos necesarios para un componente antes de que este sea activado. Los resolvers son útiles cuando necesitamos obtener información desde un backend (por ejemplo, datos de un usuario) y no queremos mostrar el componente hasta que esos datos estén disponibles.

Ventajas de usar Resolver:

Evita mostrar componentes vacíos mientras se cargan los datos.
Facilita la gestión de peticiones asíncronas, cargando la vista solo cuando toda la información está disponible.
Mejora la experiencia del usuario, ya que evita mostrar pantallas de carga innecesarias.

Implementación de un Resolver en Angular

Para usar un resolver, es necesario crear un servicio que implemente la interfaz Resolve y luego asociarlo a la configuración de las rutas.

1. Crear el resolver: Primero se crea un servicio que implemente la interfaz Resolve<T>. Este servicio define un método resolve que especifica la lógica de obtención de datos.

import { Injectable } from '@angular/core';
    import { Resolve } from '@angular/router';
    import { Observable } from 'rxjs';
    import { DataService } from './data.service';

    @Injectable({
      providedIn: 'root',
    })
    export class DataResolver implements Resolve<any> {
      constructor(private dataService: DataService) {}

      resolve(): Observable<any> {
        return this.dataService.getData();
      }
    }

2. Asociar el resolver a una ruta: El siguiente paso es agregar el resolver a la configuración de rutas del módulo correspondiente.

import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { DataComponent } from './data.component';
    import { DataResolver } from './data.resolver';

    const routes: Routes = [
      {
        path: 'data',
        component: DataComponent,
        resolve: {
          data: DataResolver,
        },
      },
    ];

    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule],
    })
    export class DataRoutingModule {}

3. Acceder a los datos en el componente: Una vez configurado, los datos precargados estarán disponibles en el componente a través del ActivatedRoute.

import { Component, OnInit } from '@angular/core';
    import { ActivatedRoute } from '@angular/router';

    @Component({
      selector: 'app-data',
      templateUrl: './data.component.html',
    })
    export class DataComponent implements OnInit {
      data: any;

      constructor(private route: ActivatedRoute) {}

      ngOnInit(): void {
        this.data = this.route.snapshot.data['data'];
      }
    }

Ejemplos de uso de Resolver en Angular

1. Precarga de información de usuario: Utilizar un resolver para cargar datos de perfil de usuario antes de mostrar una página de perfil.

2. Carga de configuración de la aplicación: Precargar configuraciones globales antes de que se carguen componentes principales.

Referencia oficial

Puedes consultar más sobre resolvers en la documentación oficial de Angular.

Etiquetas:

angular

Creado por:

Jorge García

Fullstack developer