Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 7444 razy

Drogi czytelniku droga czytelniczko! Wybacz mi tę spouchwałość, ale jeżeli masz problem z załadowaniem danych do komponentu, który został podpięty do z góry określonej ścieżki routingu to mam rozwiązanie twoich bolączek! A rozwiązanie to zwie się resolver! Albowiem składa się tak wspaniale, że do danej ścieżki można podpiąć specjalną klasę resolvera, która załaduje wszystko co ci tylko przyjdzie do tej programistycznej głowy zanim w ogóle wejdziesz do komponentu. Czyniąc długą historię krótką oto przykład takiej klasy resolvera będącego tak naprawdę serwisem implementującym interfejs Resolve wymuszający obsługę jednej metody o jakże wymownej nazwie resolve:

import { Injectable } from '@angular/core'; import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; import { of, Observable } from 'rxjs'; import { FirstContactService } from 'src/app/submodule/first-contact.service'; @Injectable({ providedIn: 'root' }) export class BooksResolverService implements Resolve<any> { constructor( private firstContactService: FirstContactService ) { } resolve(route: ActivatedRouteSnapshot, rstate: RouterStateSnapshot): Observable<any> { return this.firstContactService.getBooks(); } }

W powyższym przykładzie wykorzystałem serwis opisywany na stronie Programowanie → Angular - podstawy → Angular - komunikacja z serwerem za pomocą HttpClient. Teraz konieczne jest podpięcie tej klasy do danej ścieżki. Oto przykład jak to uczyniłem w pliku app-routing.module.ts:

path: 'books', component: BooksListComponent, resolve: { books: BooksResolverService }

Ale to jeszcze nie koniec, teraz trzeba jeszcze w konstruktorze komponentu BooksListComponent obsłużyć ładowanie danych:

constructor( private act: ActivatedRoute) { this.act.data.subscribe(value => { console.log('Some extra data:', value); }); }

Po wejściu na tą ścieżkę oczom twym w konsoli przeglądarki powinny ukazać się następujące informacje:

Some extra data: 
{...}
books: (2) [...]
0: Object { id: "1", title: "Rio Anaconda", author: "Wojciech Cejrowski" }
1: Object { id: "2", title: "Pan Tadeusz", author: "Adam Mickiewicz" }
length: 2

Możliwe jest również użycie wielu resolverów w następujący sposób:

path: 'books', component: BooksListComponent, resolve: { books: BooksResolverService, anotherResolver: AnotherResolver // podpięcie kolejnego resolvera }
Tematy powiązane