esquina del campo de fútbol

¿Qué es un Resolver?

Para asegurarnos de que ciertos datos se cargan de una respuesta de API antes de que la ruta se active realmente, usamos Solucionadores de ruta.

En otras palabras, para comprobar previamente los datos de una ruta en particular antes de cargar el componente.

¿Por qué usar un Solucionador?

Supongamos que hay un caso en el que, en una aplicación Angular, en un componente, algunos elementos se muestran espontáneamente, pero otros componentes se cargan después de que Observable se suscriba con éxito, lo que puede tardar algún tiempo en renderizarse en la interfaz de usuario. Aquí, los resolutores vienen al rescate. Permiten que las aplicaciones recuperen datos primero de una respuesta de API antes de que se cargue el componente, lo que permite la navegación de rutas.

Comencemos a implementar Resolvers.

También te puede gustar: Observables Angulares y Promesas-Cómo Usarlos.

Crear un servicio de resolución

  • Importar la interfaz de resolución desde @angular/router, que proporciona un método de resolución que garantiza que los datos devueltos se resuelvan.
  • Resolve() tiene dos parámetros: ruta que es ActivatedRouteSnapshot y estado que es RouterStateSnapshot como a continuación:

Interfaz Resolve ()

Interfaz Resolve ()
  • El método Resolve() resuelve:

empleado.resolver.ts

empleado.resolver.ts

Agregar un solucionador en Ruta

Estamos agregando el solucionador, empleado.resolver.ts, en nuestras rutas, y el método resolve, que se agregó en nuestro solucionador, devolverán los datos resueltos en la clave llamada empData.

aplicación.módulo.ts

app.módulo.ts

Acceder a los datos resueltos en nuestro EmployeeDetailsComponent

Se puede acceder a los datos resueltos utilizando la clave definida en nuestras rutas mediante el objeto snapshot de la ruta activada.

detalles del empleado.componente.ts

detalles del empleado.componente.ts

Muestra los Datos resueltos en HTML

detalles del empleado.componente.html

detalles del empleado.componente.html

Y así es como funciona el solucionador: haga que sus datos estén disponibles antes de que el enrutador comience a funcionar y los componentes se carguen.

Feliz Lectura!

Lectura adicional

  • Angular 8: Todo lo que necesita saber.
  • Aplicación de Pila completa Con Angular 8 y API Web: Parte 1.
  • Inicie sesión con Facebook y Google Usando Angular 8.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.