Resolver

init.resolver.ts

import { Injectable } from '@angular/core';
import { Resolve, Router } from '@angular/router';
import { Observable, throwError } from 'rxjs';
import { ApiService } from '../services/api.service';
import { catchError, map } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class InitResolver implements Resolve<any> {
  constructor(private readonly apiService: ApiService, private readonly router: Router) {}

  resolve(): Observable<any> | Promise<any> | any {
    return this.apiService.init().pipe(
      catchError((err) => {
        this.router.navigate(['/', '404']);
        return throwError(() => err);
      }),
      map((res: any) => res['data'])
    )
  }
}

Ez a kód egy Angular resolver-t, az InitResolver-t definiál. Az Angular-ban a resolver-eket arra használják, hogy adatokat oldjanak fel egy útvonal aktiválása előtt. Ez biztosítja, hogy minden szükséges adat rendelkezésre álljon egy új nézetbe való navigálás előtt.

Íme egy részletes leírás arról, hogy mit csinál a resolver egyes részei:

1. Függőségek:
   • ApiService: Valószínűleg egy szolgáltatás, mely egy API-val interaktál.
   • Router: Az Angular útválasztója, melyet az útvonalak közötti navigálásra használnak.
2. resolve() metódus: Ez a fő metódus hajtódik végre, amikor az ezzel a resolver-rel társított útvonalat aktiválják.
   • A metódus a this.apiService.init()-t hívja meg, ami azt sugallja, hogy egy API hívást tesz az ApiService init metódusán keresztül.
   • Az RxJS pipe metódusát használja az this.apiService.init()-ból származó observable válasz kezelésére.
   • A pipe-on belül:
     • catchError: Ha hiba történik az API hívás során, akkor a ‘404’ útvonalra navigál a this.router.navigate(['/', '404']) segítségével, majd újra eldobja a hibát a throwError(() => err) segítségével.
     • map: Ezt arra használják, hogy átalakítsák a választ. Kifejezetten kivonja az API válaszának data tulajdonságát.
3. Használat:
   • Tipikusan ezt a resolver-t egy útvonallal társítanád az Angular alkalmazásod útválasztási moduljában. Mielőtt ez a konkrét útvonal aktiválódna, az Angular végrehajtaná ennek a resolver-nek a resolve() metódusát. Csak az adatok feloldása után (vagy ha hiba történik) fejeződik be az adott útvonalra történő navigálás. Ha az API hívás sikeres, az válasz data-ja rendelkezésre áll az útvonalhoz társított komponensben.

A resolver használatának előnyei:

• Biztosítja, hogy az adatok rendelkezésre álljanak egy útvonal teljes aktiválása előtt.
• Segít elkerülni azokat a helyzeteket, amikor egy oldalra navigálsz, majd várnod kell az adatok betöltésére, ami simább felhasználói élményt nyújthat.
• Globálisan kezeli a hibákat a nézet renderelése előtt, ami következetesebb hibakezelést eredményezhet.

A lehetséges hátrányok:

• Lassíthatja az útvonalak közötti navigációt, ha az API hívás lassú vagy sikertelen.
• Ha nem megfelelően van megvalósítva, felesleges API hívásokhoz vezethet, amikor az adatok már rendelkezésre állnak vagy az állapotból származnak.

A lényeg ebből a resolver-ből az, hogy egy kezdeti adatot előzetesen beolvas egy API-ból egy adott útvonal aktiválása előtt. Ha az adatok betöltése sikertelen, átirányít egy ‘404’ oldalra. Ha sikeres, az elérhető adatokat továbbítja az aktivált útvonalhoz társított komponensnek.