Header Ads Widget

Ticker

6/recent/ticker-posts

Enrutador angular 10/9: ejemplo de resolución y resolución de enrutamiento

 El enrutador Angular 10 proporciona una resolvepropiedad que toma un solucionador de rutas y permite que su aplicación obtenga datos antes de navegar a la ruta (es decir, resolver los datos de la ruta).

Cómo crear un solucionador de rutas Angular 10

Puede crear un solucionador de rutas en Angular 10 y versiones anteriores implementando la interfaz Resolve . Por ejemplo, este es un solucionador de rutas:

import { Injectable } from '@angular/core';
import { APIService } from './api.service';

import { Resolve } from '@angular/router';

@Injectable()
export class APIResolver implements Resolve<any> {
  constructor(private apiService: APIService) {}

  resolve() {
    return this.apiService.getItems();
  }
}

En el ejemplo, asumimos que ya hemos creado un APIService que tiene un getItems()método que obtiene datos de un punto final de API remoto.

Importamos la Resolveinterfaz del @angular/routerpaquete.

Luego creamos una APIResolverclase que implementa la Resolve<any>interfaz.

En el constructor del resolutor inyectamos nuestro APIServiceas apiServicey llamamos al getItems()método del servicio en el resolve()método que debería estar definido en cualquier resolutor

Acceso a los parámetros de ruta en el solucionador

A menudo, al resolver los datos de ruta, desea obtener acceso a los parámetros de la ruta en el resolutor. Puedes hacerlo usando la ActivatedRouteSnapshotclase. Por ejemplo, supongamos que nuestra ruta tiene un dateparámetro que debe pasarse al getItems(date)método:

import { Injectable } from '@angular/core';
import { APIService } from './api.service';

import { Resolve } from '@angular/router';

import { ActivatedRouteSnapshot } from '@angular/router';

@Injectable()
export class APIResolver implements Resolve<any> {
  constructor(private apiService: APIService) {}

  resolve(route: ActivatedRouteSnapshot) {
    return this.apiService.getItems(route.params.date);
  }
}

Importamos la ActivatedRouteSnapshotclase del @angular/routerpaquete y proporcionamos un parámetro routede tipo ActivatedRouteSnapshotal resolve()método. Finalmente usamos route.params.datepara obtener el valor del dateparámetro.

Pasar el solucionador de rutas al enrutador Angular 10

Una última cosa que debe hacer es pasar el resolutor que creamos a la resolvepropiedad de la ruta correspondiente en la Routesmatriz de su módulo de enrutamiento angular:

{
  path: 'items/:date',
  component: ItemsComponent,
  resolve: { items: APIResolver }
}

Conclusión

En este tutorial, hemos visto cómo resolver datos usando la resolvepropiedad y el resolver de ruta ( Resolve) del enrutador Angular 10.

Publicar un comentario

0 Comentarios