Resolver

Resolver használata

A resolverek az Angularban arra szolgálnak, hogy bizonyos adatokat előre betöltsünk mielőtt a komponens megjelenik. Így biztosíthatjuk, hogy a képernyőn lévő adatok már rendelkezésre állnak, amikor a komponens inicializálódik.

A resolver használatával megoldhatod ezt a problémát azáltal, hogy előre betöltöd a képeket vagy azok metaadatait mielőtt a galéria komponens betöltődik.

Íme egy egyszerű példa egy resolver létrehozására és használatára:

1. Resolver létrehozása:

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

@Injectable({
  providedIn: 'root'
})
export class AlbumResolver implements Resolve<any[]> {

  constructor(private apiService: ApiService) {}

  resolve(): Observable<any[]> {
    return this.apiService.getAlbums$();
  }
}

2. Resolver hozzáadása a routinghoz:

{
  path: 'albums',
  loadChildren: () => import('./modules/albums/albums.module').then((m) => m.AlbumsModule),
  resolve: {
    images: AlbumResolverService,
  },
},

3. Adatok elérése a komponensben:

ngOnInit(): void {
  this.route.data.subscribe(data => {
    this.images = data.images;
  });
}

Ebben a példában az AlbumResolver előre betölti az albumok képeit. Amikor az AlbumsComponent betöltődik, az adatok már rendelkezésre állnak, és közvetlenül hozzárendelhetők a komponensben.

Ez garantálja, hogy az adatok már elérhetők, mielőtt a nézet betöltődik, így megakadályozza a fehér képernyő megjelenését a képek betöltésének késése miatt.