尧图网页设计 
Angular Data Resolvers 完全指南路由激活前的数据预取、输入绑定与错误处理【免费下载链接】angularDeliver web apps with confidence 项目地址: https://gitcode.com/GitHub_Trending/an/angularData Resolver数据解析器是 Angular Router 在路由激活前预取数据的核心机制它保证目标组件在首次渲染时就拥有所需数据避免组件内出现数据未就绪的空状态闪烁。本文以 skills/dev-skills/angular-developer/references/data-resolvers.md 为骨架结合本仓库packages/router的真实源码系统讲解 Resolver 的创建、路由配置、数据读取传统ActivatedRoute与现代 Component Input 两种方式以及错误处理与最佳实践读者学完后可以写出健壮、可维护的预取数据方案。一、什么是 Data Resolver在 Angular 中导航是一个多阶段流水线路由匹配 → 运行 Guards守卫→ 运行 Resolvers解析器→ 激活路由并渲染组件。Resolver 位于守卫之后、组件实例化之前专门负责把组件渲染所需的数据提前准备好。从源码看函数式 Resolver 的类型定义位于 packages/router/src/models.tsexport type ResolveFnT ( route: ActivatedRouteSnapshot, state: RouterStateSnapshot, ) MaybeAsyncT | RedirectCommand;要点解读入参route当前即将激活的路由快照ActivatedRouteSnapshot可用route.paramMap.get(id)等读取路径参数、查询参数入参state整棵路由树快照RouterStateSnapshot可用于跨路由读取全局导航信息返回值MaybeAsyncT | RedirectCommand可以同步返回数据、返回PromiseT也可以返回 RxJSObservableT特殊地可以返回RedirectCommand让路由器中止当前导航并转向新地址详见下文错误处理在路由配置中一个路由的resolve字段是ResolveData类型models.ts即一个key: ResolveFn的映射表解析完成后每个 key 会成为ActivatedRoute.data上的一个属性。二、创建 Resolver函数式与类式2.1 函数式 Resolver推荐现代 Angular 推荐使用函数式 Resolver。由于 Resolver 在注入上下文injection context中执行可以直接调用inject()获取服务。关联文档给出了最小示例import {inject} from angular/core; import {ResolveFn} from angular/router; export const userResolver: ResolveFnUser (route, state) { const userService inject(UserService); const id route.paramMap.get(id)!; return userService.getUser(id); };其中UserService.getUser(id)返回ObservableUser或PromiseUser均可Angular Router 会等待其发出值或 resolve 之后才继续导航。2.2 类式 Resolver旧 API已标记弃用在早期版本中Resolver 通过实现ResolveT接口的类来定义models.tsexport interface ResolveT { resolve( route: ActivatedRouteSnapshot, state: RouterStateSnapshot, ): MaybeAsyncT | RedirectCommand; }在 models.ts 的文档注释中明确说明基于类的 Resolver 已弃用官方建议迁移为使用inject的函数式守卫形式例如把resolve字段写成() inject(MyResolver).resolve()。仓库内部也提供了兼容桥梁mapToResolve见 packages/router/src/utils/functional_guards.ts把类式 Resolver 映射为等价的ResolveFn保证存量代码平滑迁移。新代码请直接使用函数式写法。三、配置路由resolve 键创建好 Resolver 后把它挂到路由配置的resolve键下关联文档示例import {Routes} from angular/router; export const routes: Routes [ { path: user/:id, component: UserProfile, resolve: { user: userResolver, }, }, ];一个路由可以同时挂多个 Resolver例如{ path: user/:id, component: UserProfile, resolve: { user: userResolver, posts: postsResolver, }, }多个 Resolver 会并行执行如果它们之间没有依赖全部完成后才激活路由解析结果分别存入data.user与data.posts。3.1 执行顺序Guards 在前Resolvers 在后models.ts 的官方文档注释给出了精确的执行语义当路由同时配置了 Guards 和 Resolvers 时Resolvers 必须等所有 Guards 全部通过后才开始执行。以如下嵌套路由为例{ path: base, canActivate: [baseGuard], resolve: {data: baseDataResolver}, children: [ { path: child, canActivate: [childGuard], component: ChildComponent, resolve: {childData: childDataResolver}, }, ], }实际执行顺序为baseGuard→childGuard→baseDataResolver→childDataResolver。也就是说守卫是拦截器解析器是数据准备任何守卫拒绝导航解析器都不会被调用。3.2 数据合并规则从源码可见models.ts当父路由是无组件路由componentless route时Router 会把父路由的params、data和resolve合并进子路由从而支持父级统一取数、子级继承数据的层级数据组织方式。四、访问解析后的数据解析完成后数据放在ActivatedRoute.data中。关联文档介绍了两种读取方式。4.1 传统方式通过ActivatedRoute订阅import {Component, computed, inject} from angular/core; import {toSignal} from angular/core/rxjs-interop; import {ActivatedRoute} from angular/router; Component({...}) export class UserProfile { private readonly route inject(ActivatedRoute); protected readonly data toSignal(this.route.data); protected readonly user computed(() this.data().user); }通过toSignal把route.data流转换为信号再用computed派生具体字段既保留了响应式又避免了手动订阅与退订的样板代码。4.2 现代方式通过 Component Input 直接绑定启用withComponentInputBinding()后Router 会把路由状态中的信息直接绑定到组件的Input()或input()上Resolved 数据无需再手动订阅// app.config.ts import {provideRouter, withComponentInputBinding} from angular/router; export const appConfig { providers: [ provideRouter(routes, withComponentInputBinding()), ], }; // user-profile.component.ts import {input} from angular/core; Component({...}) export class UserProfile { user input.requiredUser(); }withComponentInputBinding的源码实现位于 packages/router/src/provide_router.ts其文档注释明确了以下几点关键行为绑定来源按优先级从低到高查询参数query parameters→ 路径参数与矩阵参数path/matrix parameters→ 静态路由数据static route data→Resolver 解析出的数据优先级最高。键名重复时Resolver 的数据会覆盖其他来源未匹配时置为undefined当输入名在路由数据中找不到对应键时输入会被设为undefined防止路由切换后残留上一次的数据例如查询参数被移除时提供默认值的方式可以通过给该路由挂一个 Resolver 保证键始终存在或在组件中使用 Input 转换input transform提供默认值可关闭部分来源withComponentInputBinding({queryParams: false})可以禁止从查询参数绑定例如只希望从路径参数与 Resolver 取数时。// 仅禁用查询参数绑定 provideRouter(routes, withComponentInputBinding({queryParams: false}));五、错误处理导航失败的三层防线Resolver 一旦抛错或返回的 Observable 发出错误当前导航就会被阻塞/取消组件不会渲染。因此错误处理是 Resolver 实战中必须设计的一环。关联文档给出了两条路径结合源码还有更完整的做法。5.1 在 Resolver 内部捕获错误并重定向在 Resolver 内部使用 RxJScatchError失败时返回RedirectCommandRouter 会中止当前导航并转向新地址import {inject} from angular/core; import {Router, ResolveFn, RedirectCommand} from angular/router; import {catchError, of} from rxjs; export const userResolver: ResolveFnUser (route) { const router inject(Router); const userService inject(UserService); const id route.paramMap.get(id)!; return userService .get(id) .pipe(catchError(() of(new RedirectCommand(router.parseUrl(/error))))); };源码 models.ts 还给出了基于async/await的等价写法在try/catch中await取数失败时返回new RedirectCommand(router.parseUrl(/404))。两种风格任选其一。也可以不退却而是返回兜底fallback数据保证导航继续、组件渲染一个降级状态return userService .get(id) .pipe(catchError(() of(emptyUser)));5.2 全局统一处理withNavigationErrorHandler如果希望在应用层面集中处理导航错误例如统一上报监控、统一跳转错误页可以在provideRouter中启用withNavigationErrorHandlerimport {provideRouter, withNavigationErrorHandler, NavigationError} from angular/router; import {inject} from angular/core; provideRouter( routes, withNavigationErrorHandler((e: NavigationError) { inject(MyErrorTracker).trackError(e); return inject(Router).parseUrl(/error); // 可选把错误转成重定向 }), );源码 packages/router/src/provide_router.ts 明确了其语义处理器在应用的注入上下文中执行因此可以直接使用inject()处理器可以返回RedirectCommand此时 Router 不再发出NavigationError事件而是发出NavigationCancel取消码为Redirect——错误被优雅地转化为一次重定向返回其他值会被忽略不影响 Router 对错误的默认处理。5.3 多 Resolver 重定向的次序如果多个 Resolver 同时返回RedirectCommandRouter 只采用第一个返回的重定向见 models.ts 的注释因此不必担心多个重定向互相冲突。六、控制 Resolver 何时重新执行runGuardsAndResolvers默认情况下只有路由的路径或路径参数发生变化时Guards 与 Resolvers 才会重新运行见 models.ts 的复用策略说明。如果希望更精细地控制触发时机可以通过withRouterConfig配置runGuardsAndResolversmodels.ts 定义了完整策略provideRouter( routes, withRouterConfig({ runGuardsAndResolvers: paramsChange, }), );可选策略包括策略重新运行时机always每次导航都运行paramsOrQueryParamsChange路径参数或查询参数变化时paramsChange路径参数变化时默认行为pathParamsChange仅路径参数不含矩阵参数变化时pathParamsOrQueryParamsChange路径参数或查询参数变化时例如在同一路由仅查询参数变化的场景下默认策略不会重新取数若希望按查询参数刷新数据应显式配置为paramsOrQueryParamsChange。相关用法还可参考本仓库的 skills/dev-skills/angular-developer/references/define-routes.md。七、最佳实践7.1 保持轻量只取关键数据Resolver 会阻塞整个导航——在它完成之前新页面不会渲染。因此只把渲染所必需的关键数据放进 Resolver如实体主数据次要数据评论列表、推荐位、埋点配置等交给组件在ngOnInit后异步加载或用defer延迟加载避免拖慢首屏导航若数据本身可做缓存如按 id 缓存的UserService在服务层实现缓存可显著降低重复导航的开销。7.2 提供导航反馈监听路由事件显示全局加载条由于 UI 在 Resolver 完成前停留在旧页面用户可能误以为点击无效。关联文档建议监听路由事件驱动全局加载条。Router 在取数阶段会依次发出NavigationStart→ ... →ResolveStart→ResolveEnd源码 models.ts 明确 Resolver 在ResolveStart事件之后被调用。可在根组件中实现Component({...}) export class AppComponent { private readonly router inject(Router); protected readonly loading toSignal( this.router.events.pipe( filter(e e instanceof NavigationStart || e instanceof ResolveStart), map(() true), // 在 ResolveEnd / NavigationEnd / NavigationError / NavigationCancel 时置回 false ... ), ); }即在NavigationStart/ResolveStart显示进度条在NavigationEnd/NavigationError/NavigationCancel/ResolveEnd隐藏进度条。这样用户能明确感知导航进行中数据正在预取而不是误认为按钮失灵。7.3 与 Guards 的分工记住执行顺序Guards → Resolvers权限、登录态等能不能进的判断放 Guards数据进了之后用的预取放 Resolvers。这样既避免了守卫阶段做无用取数也让每个阶段的职责单一、易于测试。Guards 的完整写法可参考 skills/dev-skills/angular-developer/references/route-guards.md。7.4 遵循 Router 生命周期理解导航阶段Resolver 只是 Router 导航流水线的一环理解整条生命周期导航开始、守卫、解析、激活、完成有助于在正确的位置编写逻辑详见 skills/dev-skills/angular-developer/references/router-lifecycle.md。八、完整实战示例将以上知识点整合为一个可运行的完整示例访问/user/123时先取用户数据取数失败则重定向到错误页成功则通过 Component Input 直接渲染。// user.resolver.ts import {inject} from angular/core; import {ResolveFn, Router, RedirectCommand} from angular/router; import {catchError, of} from rxjs; export const userResolver: ResolveFnUser (route) { const router inject(Router); const userService inject(UserService); const id route.paramMap.get(id)!; return userService .get(id) .pipe(catchError(() of(new RedirectCommand(router.parseUrl(/error))))); }; // app.config.ts import {provideRouter, withComponentInputBinding, withNavigationErrorHandler} from angular/router; export const appConfig { providers: [ provideRouter( [ { path: user/:id, component: UserProfile, resolve: {user: userResolver}, }, {path: error, component: ErrorPage}, ], withComponentInputBinding(), withNavigationErrorHandler((e) { console.error(Navigation failed:, e); return new RedirectCommand(inject(Router).parseUrl(/error)); }), ), ], }; // user-profile.component.ts import {Component, input} from angular/core; Component({...}) export class UserProfile { user input.requiredUser(); // 由 withComponentInputBinding 自动注入 resolver 数据 }九、总结Data Resolver 是 Angular Router 提供的高阶导航能力用ResolveFn在路由激活前完成数据预取通过resolve键挂载用ActivatedRoute.data或withComponentInputBinding消费结果再用RedirectCommand与withNavigationErrorHandler构建完整的失败兜底链路。其关键源码均可在本仓库 packages/router/src/models.ts 与 packages/router/src/provide_router.ts 中查阅印证。掌握 Resolver 的完整语义与执行时机能让你的应用在数据预取、首屏体验与异常兜底之间取得最佳平衡。【免费下载链接】angularDeliver web apps with confidence 项目地址: https://gitcode.com/GitHub_Trending/an/angular创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Angular Data Resolvers 完全指南：路由激活前的数据预取、输入绑定与错误处理
Angular Data Resolvers 完全指南路由激活前的数据预取、输入绑定与错误处理【免费下载链接】angularDeliver web apps with confidence 项目地址: https://gitcode.com/GitHub_Trending/an/angularData Resolver数据解析器是 Angular Router 在路由激活前预取数据的核心机制它保证目标组件在首次渲染时就拥有所需数据避免组件内出现数据未就绪的空状态闪烁。本文以 skills/dev-skills/angular-developer/references/data-resolvers.md 为骨架结合本仓库packages/router的真实源码系统讲解 Resolver 的创建、路由配置、数据读取传统ActivatedRoute与现代 Component Input 两种方式以及错误处理与最佳实践读者学完后可以写出健壮、可维护的预取数据方案。一、什么是 Data Resolver在 Angular 中导航是一个多阶段流水线路由匹配 → 运行 Guards守卫→ 运行 Resolvers解析器→ 激活路由并渲染组件。Resolver 位于守卫之后、组件实例化之前专门负责把组件渲染所需的数据提前准备好。从源码看函数式 Resolver 的类型定义位于 packages/router/src/models.tsexport type ResolveFnT ( route: ActivatedRouteSnapshot, state: RouterStateSnapshot, ) MaybeAsyncT | RedirectCommand;要点解读入参route当前即将激活的路由快照ActivatedRouteSnapshot可用route.paramMap.get(id)等读取路径参数、查询参数入参state整棵路由树快照RouterStateSnapshot可用于跨路由读取全局导航信息返回值MaybeAsyncT | RedirectCommand可以同步返回数据、返回PromiseT也可以返回 RxJSObservableT特殊地可以返回RedirectCommand让路由器中止当前导航并转向新地址详见下文错误处理在路由配置中一个路由的resolve字段是ResolveData类型models.ts即一个key: ResolveFn的映射表解析完成后每个 key 会成为ActivatedRoute.data上的一个属性。二、创建 Resolver函数式与类式2.1 函数式 Resolver推荐现代 Angular 推荐使用函数式 Resolver。由于 Resolver 在注入上下文injection context中执行可以直接调用inject()获取服务。关联文档给出了最小示例import {inject} from angular/core; import {ResolveFn} from angular/router; export const userResolver: ResolveFnUser (route, state) { const userService inject(UserService); const id route.paramMap.get(id)!; return userService.getUser(id); };其中UserService.getUser(id)返回ObservableUser或PromiseUser均可Angular Router 会等待其发出值或 resolve 之后才继续导航。2.2 类式 Resolver旧 API已标记弃用在早期版本中Resolver 通过实现ResolveT接口的类来定义models.tsexport interface ResolveT { resolve( route: ActivatedRouteSnapshot, state: RouterStateSnapshot, ): MaybeAsyncT | RedirectCommand; }在 models.ts 的文档注释中明确说明基于类的 Resolver 已弃用官方建议迁移为使用inject的函数式守卫形式例如把resolve字段写成() inject(MyResolver).resolve()。仓库内部也提供了兼容桥梁mapToResolve见 packages/router/src/utils/functional_guards.ts把类式 Resolver 映射为等价的ResolveFn保证存量代码平滑迁移。新代码请直接使用函数式写法。三、配置路由resolve 键创建好 Resolver 后把它挂到路由配置的resolve键下关联文档示例import {Routes} from angular/router; export const routes: Routes [ { path: user/:id, component: UserProfile, resolve: { user: userResolver, }, }, ];一个路由可以同时挂多个 Resolver例如{ path: user/:id, component: UserProfile, resolve: { user: userResolver, posts: postsResolver, }, }多个 Resolver 会并行执行如果它们之间没有依赖全部完成后才激活路由解析结果分别存入data.user与data.posts。3.1 执行顺序Guards 在前Resolvers 在后models.ts 的官方文档注释给出了精确的执行语义当路由同时配置了 Guards 和 Resolvers 时Resolvers 必须等所有 Guards 全部通过后才开始执行。以如下嵌套路由为例{ path: base, canActivate: [baseGuard], resolve: {data: baseDataResolver}, children: [ { path: child, canActivate: [childGuard], component: ChildComponent, resolve: {childData: childDataResolver}, }, ], }实际执行顺序为baseGuard→childGuard→baseDataResolver→childDataResolver。也就是说守卫是拦截器解析器是数据准备任何守卫拒绝导航解析器都不会被调用。3.2 数据合并规则从源码可见models.ts当父路由是无组件路由componentless route时Router 会把父路由的params、data和resolve合并进子路由从而支持父级统一取数、子级继承数据的层级数据组织方式。四、访问解析后的数据解析完成后数据放在ActivatedRoute.data中。关联文档介绍了两种读取方式。4.1 传统方式通过ActivatedRoute订阅import {Component, computed, inject} from angular/core; import {toSignal} from angular/core/rxjs-interop; import {ActivatedRoute} from angular/router; Component({...}) export class UserProfile { private readonly route inject(ActivatedRoute); protected readonly data toSignal(this.route.data); protected readonly user computed(() this.data().user); }通过toSignal把route.data流转换为信号再用computed派生具体字段既保留了响应式又避免了手动订阅与退订的样板代码。4.2 现代方式通过 Component Input 直接绑定启用withComponentInputBinding()后Router 会把路由状态中的信息直接绑定到组件的Input()或input()上Resolved 数据无需再手动订阅// app.config.ts import {provideRouter, withComponentInputBinding} from angular/router; export const appConfig { providers: [ provideRouter(routes, withComponentInputBinding()), ], }; // user-profile.component.ts import {input} from angular/core; Component({...}) export class UserProfile { user input.requiredUser(); }withComponentInputBinding的源码实现位于 packages/router/src/provide_router.ts其文档注释明确了以下几点关键行为绑定来源按优先级从低到高查询参数query parameters→ 路径参数与矩阵参数path/matrix parameters→ 静态路由数据static route data→Resolver 解析出的数据优先级最高。键名重复时Resolver 的数据会覆盖其他来源未匹配时置为undefined当输入名在路由数据中找不到对应键时输入会被设为undefined防止路由切换后残留上一次的数据例如查询参数被移除时提供默认值的方式可以通过给该路由挂一个 Resolver 保证键始终存在或在组件中使用 Input 转换input transform提供默认值可关闭部分来源withComponentInputBinding({queryParams: false})可以禁止从查询参数绑定例如只希望从路径参数与 Resolver 取数时。// 仅禁用查询参数绑定 provideRouter(routes, withComponentInputBinding({queryParams: false}));五、错误处理导航失败的三层防线Resolver 一旦抛错或返回的 Observable 发出错误当前导航就会被阻塞/取消组件不会渲染。因此错误处理是 Resolver 实战中必须设计的一环。关联文档给出了两条路径结合源码还有更完整的做法。5.1 在 Resolver 内部捕获错误并重定向在 Resolver 内部使用 RxJScatchError失败时返回RedirectCommandRouter 会中止当前导航并转向新地址import {inject} from angular/core; import {Router, ResolveFn, RedirectCommand} from angular/router; import {catchError, of} from rxjs; export const userResolver: ResolveFnUser (route) { const router inject(Router); const userService inject(UserService); const id route.paramMap.get(id)!; return userService .get(id) .pipe(catchError(() of(new RedirectCommand(router.parseUrl(/error))))); };源码 models.ts 还给出了基于async/await的等价写法在try/catch中await取数失败时返回new RedirectCommand(router.parseUrl(/404))。两种风格任选其一。也可以不退却而是返回兜底fallback数据保证导航继续、组件渲染一个降级状态return userService .get(id) .pipe(catchError(() of(emptyUser)));5.2 全局统一处理withNavigationErrorHandler如果希望在应用层面集中处理导航错误例如统一上报监控、统一跳转错误页可以在provideRouter中启用withNavigationErrorHandlerimport {provideRouter, withNavigationErrorHandler, NavigationError} from angular/router; import {inject} from angular/core; provideRouter( routes, withNavigationErrorHandler((e: NavigationError) { inject(MyErrorTracker).trackError(e); return inject(Router).parseUrl(/error); // 可选把错误转成重定向 }), );源码 packages/router/src/provide_router.ts 明确了其语义处理器在应用的注入上下文中执行因此可以直接使用inject()处理器可以返回RedirectCommand此时 Router 不再发出NavigationError事件而是发出NavigationCancel取消码为Redirect——错误被优雅地转化为一次重定向返回其他值会被忽略不影响 Router 对错误的默认处理。5.3 多 Resolver 重定向的次序如果多个 Resolver 同时返回RedirectCommandRouter 只采用第一个返回的重定向见 models.ts 的注释因此不必担心多个重定向互相冲突。六、控制 Resolver 何时重新执行runGuardsAndResolvers默认情况下只有路由的路径或路径参数发生变化时Guards 与 Resolvers 才会重新运行见 models.ts 的复用策略说明。如果希望更精细地控制触发时机可以通过withRouterConfig配置runGuardsAndResolversmodels.ts 定义了完整策略provideRouter( routes, withRouterConfig({ runGuardsAndResolvers: paramsChange, }), );可选策略包括策略重新运行时机always每次导航都运行paramsOrQueryParamsChange路径参数或查询参数变化时paramsChange路径参数变化时默认行为pathParamsChange仅路径参数不含矩阵参数变化时pathParamsOrQueryParamsChange路径参数或查询参数变化时例如在同一路由仅查询参数变化的场景下默认策略不会重新取数若希望按查询参数刷新数据应显式配置为paramsOrQueryParamsChange。相关用法还可参考本仓库的 skills/dev-skills/angular-developer/references/define-routes.md。七、最佳实践7.1 保持轻量只取关键数据Resolver 会阻塞整个导航——在它完成之前新页面不会渲染。因此只把渲染所必需的关键数据放进 Resolver如实体主数据次要数据评论列表、推荐位、埋点配置等交给组件在ngOnInit后异步加载或用defer延迟加载避免拖慢首屏导航若数据本身可做缓存如按 id 缓存的UserService在服务层实现缓存可显著降低重复导航的开销。7.2 提供导航反馈监听路由事件显示全局加载条由于 UI 在 Resolver 完成前停留在旧页面用户可能误以为点击无效。关联文档建议监听路由事件驱动全局加载条。Router 在取数阶段会依次发出NavigationStart→ ... →ResolveStart→ResolveEnd源码 models.ts 明确 Resolver 在ResolveStart事件之后被调用。可在根组件中实现Component({...}) export class AppComponent { private readonly router inject(Router); protected readonly loading toSignal( this.router.events.pipe( filter(e e instanceof NavigationStart || e instanceof ResolveStart), map(() true), // 在 ResolveEnd / NavigationEnd / NavigationError / NavigationCancel 时置回 false ... ), ); }即在NavigationStart/ResolveStart显示进度条在NavigationEnd/NavigationError/NavigationCancel/ResolveEnd隐藏进度条。这样用户能明确感知导航进行中数据正在预取而不是误认为按钮失灵。7.3 与 Guards 的分工记住执行顺序Guards → Resolvers权限、登录态等能不能进的判断放 Guards数据进了之后用的预取放 Resolvers。这样既避免了守卫阶段做无用取数也让每个阶段的职责单一、易于测试。Guards 的完整写法可参考 skills/dev-skills/angular-developer/references/route-guards.md。7.4 遵循 Router 生命周期理解导航阶段Resolver 只是 Router 导航流水线的一环理解整条生命周期导航开始、守卫、解析、激活、完成有助于在正确的位置编写逻辑详见 skills/dev-skills/angular-developer/references/router-lifecycle.md。八、完整实战示例将以上知识点整合为一个可运行的完整示例访问/user/123时先取用户数据取数失败则重定向到错误页成功则通过 Component Input 直接渲染。// user.resolver.ts import {inject} from angular/core; import {ResolveFn, Router, RedirectCommand} from angular/router; import {catchError, of} from rxjs; export const userResolver: ResolveFnUser (route) { const router inject(Router); const userService inject(UserService); const id route.paramMap.get(id)!; return userService .get(id) .pipe(catchError(() of(new RedirectCommand(router.parseUrl(/error))))); }; // app.config.ts import {provideRouter, withComponentInputBinding, withNavigationErrorHandler} from angular/router; export const appConfig { providers: [ provideRouter( [ { path: user/:id, component: UserProfile, resolve: {user: userResolver}, }, {path: error, component: ErrorPage}, ], withComponentInputBinding(), withNavigationErrorHandler((e) { console.error(Navigation failed:, e); return new RedirectCommand(inject(Router).parseUrl(/error)); }), ), ], }; // user-profile.component.ts import {Component, input} from angular/core; Component({...}) export class UserProfile { user input.requiredUser(); // 由 withComponentInputBinding 自动注入 resolver 数据 }九、总结Data Resolver 是 Angular Router 提供的高阶导航能力用ResolveFn在路由激活前完成数据预取通过resolve键挂载用ActivatedRoute.data或withComponentInputBinding消费结果再用RedirectCommand与withNavigationErrorHandler构建完整的失败兜底链路。其关键源码均可在本仓库 packages/router/src/models.ts 与 packages/router/src/provide_router.ts 中查阅印证。掌握 Resolver 的完整语义与执行时机能让你的应用在数据预取、首屏体验与异常兜底之间取得最佳平衡。【免费下载链接】angularDeliver web apps with confidence 项目地址: https://gitcode.com/GitHub_Trending/an/angular创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考