Olhando a implementação do componente PhotoDetailsComponent
o mesmo poderiamos também utilizar um resolver para buscar os dados?
Olhando a implementação do componente PhotoDetailsComponent
o mesmo poderiamos também utilizar um resolver para buscar os dados?
Olá Thiago! Tudo bem?
Desculpe a demora em retornar.
Sim, é possível utilizar um resolver para buscar os dados no PhotoDetailsComponent
. O resolver é uma ótima opção para pré-carregar os dados necessários antes que o componente seja exibido na tela, melhorando a experiência do usuário.
Para implementar um resolver, você pode criar um serviço que implemente a interface Resolve
do Angular e injetá-lo no arquivo de rotas do seu módulo. No método resolve
, você pode fazer a chamada para a API que retorna os dados necessários e retornar um Observable
com esses dados.
Por exemplo, suponha que você tenha um serviço PhotoService
que possui um método getPhotoById(id: number)
que retorna um Observable
com os dados da foto. Você pode criar um resolver da seguinte forma:
@Injectable({ providedIn: 'root' })
export class PhotoResolver implements Resolve<Observable<Photo>> {
constructor(private photoService: PhotoService) {}
resolve(route: ActivatedRouteSnapshot): Observable<Photo> {
const id = route.paramMap.get('id');
return this.photoService.getPhotoById(id);
}
}
E no arquivo de rotas do seu módulo, você pode adicionar o resolver da seguinte forma:
const routes: Routes = [
{
path: 'photo/:id',
component: PhotoDetailsComponent,
resolve: { photo: PhotoResolver }
}
];
Dessa forma, o resolver será executado antes do PhotoDetailsComponent
ser exibido na tela, e os dados da foto serão pré-carregados.
Espero ter ajudado.
Um abraço e bons estudos.