ResolveFn

Определение типа функции для поставщика данных.

Поставщик данных можно использовать с маршрутизатором для получения данных во время навигации. Маршрутизатор ожидает, пока данные будут получены, прежде чем окончательно активировать маршрут.

Резолвер также может перенаправить RedirectCommand, и маршрутизатор Angular использует его для перенаправления текущей навигации к новому адресу.

В следующем примере реализована функция, которая получает данные, необходимые для активации запрошенного маршрута.

interface Hero {
  name: string;
}
@Injectable()
export class HeroService {
  getHero(id: string) {
    return {name: `Superman-${id}`};
  }
}

export const heroResolver: ResolveFn<Hero> = (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot,
) => {
  return inject(HeroService).getHero(route.paramMap.get('id')!);
};

bootstrapApplication(App, {
  providers: [
    provideRouter([
      {
        path: 'detail/:id',
        component: HeroDetailComponent,
        resolve: {hero: heroResolver},
      },
    ]),
  ],
});

Получить доступ к разрешенным данным можно из HeroComponent:

@Component({template: ''})
export class HeroDetailComponent {
  private activatedRoute = inject(ActivatedRoute);

  ngOnInit() {
    this.activatedRoute.data.subscribe(({hero}) => {
      // do something with your resolved data ...
    });
  }
}

Если получить разрешенные данные не удается, можно перенаправить пользователя на новую страницу:

export const heroResolver: ResolveFn<Hero> = async (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot,
) => {
  const router = inject(Router);
  const heroService = inject(HeroService);
  try {
    return await heroService.getHero(route.paramMap.get('id')!);
  } catch {
    return new RedirectCommand(router.parseUrl('/404'));
  }
};

Если указаны и проверки, и резолверы, резолверы выполняются только после успешного завершения всех проверок. Например, рассмотрим следующую конфигурацию маршрутов:

{
 path: 'base'
 canActivate: [baseGuard],
 resolve: {data: baseDataResolver}
 children: [
  {
    path: 'child',
    canActivate: [childGuard],
    component: ChildComponent,
    resolve: {childData: childDataResolver}
   }
 ]
}

Порядок выполнения: baseGuard, childGuard, baseDataResolver, childDataResolver.