Resolvers e dados de rota
Pré-carregue dados antes de ativar uma rota.
Resolvers e dados de rota é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.
O que é um resolver
Um resolver pré-carrega dados antes de uma rota ser ativada, para que o componente seja renderizado com os dados já disponíveis — sem exibir um carregamento no próprio componente.
Dados estáticos da rota
A propriedade data associa valores estáticos a uma rota, que podem ser lidos por meio de ActivatedRoute.data.
export const routes = [
{ path: 'admin', component: AdminComponent,
data: { title: 'Admin Panel', roles: ['admin'] } }
];Lendo dados da rota
route.data é um observable do objeto de dados mesclado.
route.data.subscribe(d => {
console.log(d['title']); // Admin Panel
});Resolver funcional: ResolveFn
O Angular moderno usa ResolveFn — uma função simples que retorna os dados (ou um observable/promise desses dados).
import { ResolveFn } from '@angular/router';
import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
export const userResolver = (route) => {
const http = inject(HttpClient);
return http.get('/api/user/' + route.paramMap.get('id'));
};Associando o resolver a uma rota
Associe resolvers sob a chave resolve. O resultado é colocado em route.data sob essa chave.
export const routes = [
{ path: 'user/:id', component: UserComponent,
resolve: { user: userResolver } }
];Consumindo dados resolvidos
Leia o valor resolvido em route.data usando sua chave.
route.data.subscribe(d => {
this.user = d['user']; // already loaded
});Dados resolvidos por meio da vinculação de entradas
Com withComponentInputBinding(), as chaves resolvidas são vinculadas automaticamente às entradas correspondentes do componente.
export class UserComponent {
@Input() user!: User; // from resolve: { user: ... }
}Resolvers e o momento da navegação
O roteador espera que o observable do resolver seja concluído (ou que a promise seja resolvida) antes de ativar a rota. Um resolver que nunca é concluído bloqueia a navegação.
Tratando erros de resolvers
Se um resolver apresentar um erro, a navegação será cancelada. Capture os erros dentro do resolver para redirecionar ou retornar uma alternativa.
export const userResolver = (route) => {
const http = inject(HttpClient);
const router = inject(Router);
return http.get('/api/user/' + route.paramMap.get('id')).pipe(
catchError(() => { router.navigate(['/404']); return EMPTY; })
);
};Quando usar resolvers
Use resolvers para dados que precisam estar presentes antes de a página ser exibida. Para dados que podem ser carregados progressivamente, buscá-los no componente (com um estado de carregamento) geralmente proporciona uma experiência melhor. Não bloqueie a navegação por causa de dados opcionais lentos.
Estratégia de título
O roteador tem uma propriedade de rota title integrada e TitleStrategy para definir o título do documento, frequentemente em conjunto com dados resolvidos.
export const routes = [
{ path: 'about', component: AboutComponent, title: 'About Us' }
];Verificação rápida
Teste sua compreensão dos resolvers.
Recapitulação: resolvers e dados de rota
Os resolvers pré-carregam dados antes da ativação.
data: valores estáticos da rota.ResolveFn+resolve: pré-carregamento dinâmico emroute.data.- O roteador espera a conclusão; trate os erros para evitar o bloqueio da navegação.
A seguir: guardas de rota funcionais.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 38
- Aulas
- 144
Perguntas Frequentes
A aula “Resolvers e dados de rota” é grátis?
Sim — o texto completo de “Resolvers e dados de rota” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.
O que vou aprender em “Resolvers e dados de rota”?
Pré-carregue dados antes de ativar uma rota. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Angular Academy?
Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Resolvers e dados de rota”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Angular Academy?
Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Parâmetros de rota e parâmetros de consulta
- Resolvers e dados de rota
- Guardas de rota funcionais
- Eventos do roteador e navegação